I'd like to display Stackable Modal in my view :
Principal view
.....some code
#*Pop Up ajout demande*#
<div class="modal fade" tabindex="-1" data-focus-on="input:first" role="dialog" id="addModal" style="height: 100%">
<div class="modal-dialog" style="width: 100%">
<div class="modal-content" style="width: 100%">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<label class="modal-title center-block" style="color:red; font-size:larger"></label>
</div>
<div class="modal-body">
#Html.Partial("AjouterDemandePopUp")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="btnEscape">Quitter</button>
</div>
</div>
</div>
</div>
Partial view AjouterDemandePopUp
...........some code
<div class="modal " tabindex="-2" id="VehModal">
<div class="modal-dialog" style="width: 100%">
<div class="modal-content" style="width: 100%">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<label class="modal-title center-block" style="color:red; font-size:larger">Choix de véhicule</label>
</div>
<div class="modal-body">
<p><label id="labchauffeurs">Chauffeurs disponibles</label> <select id="lstchauffeurs" name="lstchauffeurs" style="width:250px; "></select> </p>
<p>
<table id="tblauto" class="table table-bordered table-striped">
<thead>
<tr style="color:white;background-color:#3c8dbc" id="autoheader">
<th></th>
<th>Chauffeur</th>
<th>Marque</th>
<th>Plaque d’immatriculation</th>
<th>Kilométrage</th>
<th>Année de fabrication</th>
<th>Carte de carburant </th>
<th>Observation</th>
</tr>
</thead>
<tbody id="tblautoBody"></tbody>
</table>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" id="btnSetVehicle">Valider</button>
<button type="button" class="btn btn-default" data-dismiss="modal" id="btnQuit">Annuler</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
The problem is when I validate or close the second pop ( pop up inside partial view) the first pop up will be closed !!!
I need to know the reasons of this behavior? How can I fix this?
When you click on the button with attribute data-dismiss="modal" then it will call bootstrap function to close all opened modals.
Instead of using built-in function - create your own function, which will close specific modal. Use attribute like data-dismiss-modal="#modal_id" - then you will dismiss modal only with id #modal_id
$(document).on('click', '[data-dismiss-modal]', function () {
var target = $(this).attr('data-dismiss-modal');
$(target).modal('hide');
});
Example: https://jsfiddle.net/73mdx4jm/
Related
i have created the bootstrap model and i am opening the the model on button click, Now the problem is i want to pass the object of data to that model so once the user enter the comment in the model i will get the comment as well as my object back for identification, can some one help me out with the solution
MY HTML CODE
<div class="modal" tabindex="-1" role="dialog" id="mymodal">
<div class="modal-dialog displayMainmodel" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: #aeb3b7; color:White">
<h5 class="modal-title">Insert Your comment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div style="text-align: center;">
<textarea [value]="precomment" #comment placeholder="Enter your Comment"
rows="4" cols="50"
style="resize: none; border: 1px solid #aeb3b7;width: 100%;">
</textarea>
</div>
</div>
<div class="modal-footer" style="justify-content: center; border:none">
<button type="button" class="btn btn-primary"
style="background-color: #3CB371;"
(click)="submitcomment(comment.value)">Submit</button>
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My Ts code
openpopup(datacommentid,name){
console.log("data is",datacommentid,name)
this.data.forEach(element => {
console.log("sjdksa",element)
if(element.id==datacommentid){
this.precomment=name.comments
}
});
$('#mymodal').modal();
}
submitcomment(mycomment){
console.log("the comment is",mycomment)
}
Use shown.bs.modal event
Here is the demo: https://jsfiddle.net/chille1987/ozud4cgq/9/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('shown.bs.modal', function (e) {
var element = $('<div>Modal is opened</div>');
$('.modal-body').append(element);
})
How to show details data(using popup) when I click the view button in table in each rows?
button code
echo '<button href="student.php?id="'.$row['mactrixNo'].'" onclick=document.getElementById("id02").style.display="block">View</button>';
popup code
<div id="id02" class="logform">
<table border="1" class="tg w-100">
<tr>
<?php if(isset($_GET['id'])){
$query='select *
from student
where mactrixNo="'.$_GET['id'].'"';
}
?>
I can't get the 'id' when popup
Bootstrap provides the HTML, CSS, and JavaScript you need to achieve this.
This is from v4 https://getbootstrap.com/docs/4.1/components/modal/
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
So long as you have the CSS and JS in your <head> section, all you need to do is edit the content!
Allright i want to make my bootstrap modal dynamic but not sure how to do it.. I know i need to use #PredictioItems.Name But not sure where :(
Code:
<div style="margin-top: 55px;" class="col-sm-10 col-sm-offset-1">
#foreach (var PredictioItems in Model.Content.Children())
{
if (PredictioItems.GetPropertyValue("checkboxchecker").Equals(true))
{
<h4 style="color: #000;">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
<strong style="color: #000;">#PredictioItems.GetPropertyValue("predictinfo")</strong><br />
<img src="#Umbraco.TypedMedia(PredictioItems.GetPropertyValue("matchimage")).Url" />
<p style="color: #000">#Umbraco.Truncate(PredictioItems.GetPropertyValue("predictdescription").ToString(), 25)</p>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">View full description & Livestream!</button>
<hr />
}
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
</div>
<div class="modal-body">
<p>#PredictioItems.GetPropertyValue("predictdescription")</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
</div>
Some one that can tell me what to replace to make it work? Thank you :)
Something like this should do it - as #vel says, each possible modal "instance" has to have a unique id and the button to open it should reference that id:
<div style="margin-top: 55px;" class="col-sm-10 col-sm-offset-1">
#foreach (var PredictioItems in Model.Content.Children())
{
if (PredictioItems.GetPropertyValue("checkboxchecker").Equals(true))
{
<h4 style="color: #000;">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
<strong style="color: #000;">#PredictioItems.GetPropertyValue("predictinfo")</strong><br />
<img src="#Umbraco.TypedMedia(PredictioItems.GetPropertyValue("matchimage")).Url" />
<p style="color: #000">#Umbraco.Truncate(PredictioItems.GetPropertyValue("predictdescription").ToString(), 25)</p>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal#(PredictioItems.Id)">View full description & Livestream!</button>
<hr />
}
<div id="myModal#(PredictioItems.Id)" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
</div>
<div class="modal-body">
<p>#PredictioItems.GetPropertyValue("predictdescription")</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
</div>
I have a table from which i am trying on row button click to open a modal containing the details of the object with the rowId. when my button is pressed i go into code behind and do a query that searches the data from the database, then in javascript i send the data to the modal and open it. The table is placed inside a partial view on it's own so that i can pass here a model. the problem that i am facing is that the modal is not opening as a modal but it is opening as a partial view inside the page.
here is my javascript:
$(document).ready(function () {
$('.btn').click(function () {
debugger;
var url = $('#rowDetails').data('url');
$('#rowDetailsBody').html(data);
$('#rowDetails').modal('toggle');
$('#rowDetails').modal('show');
});
});
row detail is the name of my modal that is contained in a partial view, and rowDetailBody is the Modal-Body.
this the function that i do to get data:
public ActionResult ShowDialog(int id )
{
PSEntities _context = new PSEntities(true);
var data = //some query here
return PartialView("ShowDialog", data);
}
i return to a partial view named showDialog the data that is fetched from the database.
and this is my patialView:
<div class="modal fade" draggable="true" id="rowDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">SMS #item.SmsMT.Id</h3>
</div>
<div class="modal-body" id="rowDetailsBody">
<table style="width:100%;" class="table table table-hover table-striped table-condensed export-table" border="0">
<tr>
<td align="left">
<label>#ViewRes.SharedStrings.SmsID</label>
</td>
<td>
#Html.DisplayFor(modelItem => item.SmsMT.Id)
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-sm" type="button" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
plz can someone help me and tell how to open the window in a modal instead of full screen
Looks like you have missed modal-dialog and modal-content wrapper from your modal markup.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I have 2 bootstrap models on the same page, the first modal opens and runs as expected. After saving the form data in the first modal, a button is visible to open up the second modal. The button however is not clickable:
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
I've found a few that have had similar problems with two modals on the same page but there appears to be no common causes. How can I fix this? Preferably I would like the button to work. Iif for whatever reason it's not possible, I'm ok with JS automatically opening the second modal after the 1st one closes. I have also been unsuccessful with getting that to work. I've triple checked that all my tags are closed and correctly spaced. I've omitted a lot of the form content within the modals in the code below for purposes of brevity. I've also included my JS at the end of the page that directs the visibility of the modals.
<div class="add_left">
<div id="crop-avatar" class="container">
<div class="bigpicture"> <img src="" > </div>
<div class="avatar-view" title="Add new listing"> <img src="../0images/cropy.jpg" alt="Listing Image" width="400px"</div>
<!-- modal 1 -->
<div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form name="avatar-form" class="avatar-form" method="post" action="crop-avatar.php" enctype="multipart/form-data">
<div class="modal-header"> </div>
<div class="modal-body">
<div class="avatar-body">
<div class="row"> </div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button id="nxtbutt" class="btn btn-primary avatar-save" disabled type="submit">Save Image</button>
</div>
</form>
<div class="loading" tabindex="-1" role="img" aria-label="Loading"></div>
</div>
</div>
</div>
</div>
</div>
<div class="add_right">
<h4 class="instructiondata" style="padding-top:20px">Click the button below to add your pdf file and data:</h4>
<button type="button" class="btn btn-success btn-sm" style="width: 100%;" data-toggle="modal" data-target="#modal1">modal1</button>
<!-- modal 2 -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<form name="data-form" class="data-form" method="post" action="add_data.php" enctype="multipart/form-data">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<h2>Listing Designation</h2>
<fieldset style="padding-left:5px;">
<legend> Designation </legend>
</fieldset>
</div>
<div class="modal-footer">
<input class="avatar-src" name="avatar_src" type="hidden">
<input type="hidden" name="id" value="">
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
<button id="nxtbutttwo" class="btn btn-primary avatar-save" type="submit">Save Listing</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<script Content-Type: application/javascript src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$("#avatarInput").on("change", function() {
$("#nxtbutt").prop('disabled', !$(this).val());
});
$(document).ready(function(){
$(".add_right").hide();
$(".add_display").hide();
$(".bigpicture").hide();
$(".instructiondata").hide();
});
$( "#nxtbutt" ).click(function () {
$(".add_right").show();
$(".bigpicture").show();
$(".add_display").hide();
$(".avatar-view").hide();
$(".instruction").hide();
$(".instructiondata").show();
});
$( "#nxtbutttwo" ).click(function () {
$(".add_right").show();
$(".add_display").show();
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
Thank you in advance!
Don't use show() and hide() here.
You can close and open using the modal method:
$("#secondModalButton").click(function() {
$("#firstModal").modal('hide');
$("#secondModal").modal('show');
});
Or (I just noticed) you can do it purely with bootstrap attributes:
<button type="button" class="btn btn-primary" id="secondModalButton"
data-dismiss="modal"
data-toggle="modal"
data-target="#secondModal">Second modal</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#firstModal">
Launch first modal
</button>
<!-- First Modal -->
<div class="modal fade" id="firstModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
First Modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="secondModalButton" data-dismiss="modal" data-toggle="modal" data-target="#secondModal">Second modal</button>
</div>
</div>
</div>
</div>
<!-- Second Modal -->
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="secondModal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
Second modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>