For those code, there have a button "Launch modal" to open the Model, then in Model, also have a button "Launch modal2" to open a new model(just call model2) on Model. When I click the close button on model2, all of the Model will de dismiss. How can I fix that?
Please note that I need to put model2 in Model for display data.
Thanks.
http://jsfiddle.net/ve42xs6w/
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
<br>
<br>
<br>
<br>
<br>
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal2</a>
<div class="modal" id="myModal2" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Second Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
The problem is that you are putting the second modal inside of the first modal. Bootstrap just closes all modals that the close button is inside of, so if you nest them the second close button will close all outside modals.
To fix this you can just move the whole div#myModal2 down under the first div#myModal so they are separate elements.
Like this: http://jsfiddle.net/e92o1j3s/3/
Related
I simply copied the example from Bootstrap 5 docs, but the first modal is not hidden if I open the 2nd modal from within the modal popup. Why?
You can see that the backdrop is also a bit darker for the 2nd popup, which is because the 2nd one is simply overlayed on the 1st one, without hiding the prior modal.
I also tried it locally with same result: the 1st modal is never hidden.
Interestingly it works as expected on the bootstrap docs website...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/neog0236/1/
I see that your JSFiddle demo uses an older library version. When I update that it works. See the Highlights section of the 5.1.1 release notes.
var myModalEl = document.querySelector('#scheduleMeetingModal');
var myModal = bootstrap.Modal.getOrCreateInstance(myModalEl);
myModal.hide();
i want to show popup dialog box in asp net using js but it not working!
here is my code
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The behaviour: when i click the button, the popup dialog not shown and the page become disabled(gray shadow).
when i remove ( class= "modal"), it shown put also everything is disabled!!!
Did you add bootstrap.min.css, jquery.min.js, bootstrap.min.js in the view or the main layout?
I have a simple html design with an animated menu. I am trying to implement bootstrap on it and make modal window. But when someone clicks at contact, my animated menu stops working. Here you can check the problem.
My modal code here. I'm using #mymodal on menu link.
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can do this using Jquery
$(document).on("click",".menu",function(){
$("#myModal").modal("show")
})
I want to make a sub modal in a main modal.
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" 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">Modal header</h3>
</div>
<div class="modal-body">
Main contant
<!-- Button to trigger modal -->
Launch sub demo modal
<!-- Sub Modal -->
<div id="subModal" class="modal hide fade" 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">Modal header</h3>
</div>
<div class="modal-body">
Sub contant
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
The problem is that when I close the sub modal,the main modal was closed together.
Can I set the close event for every modal on one's own?
You don't need to have each modal nested on the parent modal. To you archive what you need, separe the modals, so each node modal will have it own close data-dissmis attribute, and when triggered it will dissmis only that modal. (And as you need to work with submodals, it will fit your needs, because even with separete html trees, the submodal will be called above the main modal, or the first one)
Heres the fiddle example ( The HTML are a bit desorganized, sory about that ):
http://jsfiddle.net/h3WDq/202/
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div>
Launch Modal
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
Launch Modal
</div>
</div>
<!-- Modal -->
<div id="myModal2" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
<select class="selectpicker" data-container="body">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<style>
As i said, you going to create two modals separated, and each one will have its own data-dismiss button, and when them get called, they will just close that specific modal, and as you can see in my example they work as submodals.
I am experiencing a problem with one of the three modals running on one page. When it's visible and you click it's body it opens the other one behind it.
This is the opened one:
<span class="help-block">#Html.Raw(ptype.Description.StripHtml())</span>
<div id="klarnaModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="klarnaModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-contents">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="klarnaModalLabel">#Html.Raw(ptype.Description)</h3>
</div>
<div class="modal-body">
<iframe src="https://cdn.klarna.com/1.0/shared/content/legal/terms/24637/sv_se/invoice?fee=0"></iframe>
</div>
</div>
</div>
</div>
And the one that opens by clicking the other body:
<input type="radio" name="paymenttype" id="#ptype.Id" value="#ptype.Id" data-toggle="modal" data-target="#klarnaSubmitModal" data-remote="true" />
<div id="klarnaSubmitModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="klarnaSubmitModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-contents">
<div class="modal-header">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="klarnaSubmitModalLabel"><i class="icon icon-info-sign"></i>Vigtigt</h3>
</div>
<div class="modal-body">
Det er ikke muligt at benytte alternativ leveringsadresse sammen med Klarna Faktura.<br /><br />
Vælger du at fortsætte vil din ordre blive leveret til faktureringsadressen.<br /><br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-medium btn-primary" id="acceptklarna-btn">
<i class="icon icon-ok-sign"></i><b><span>Fortsæt</span></b>
</button>
<button type="button" class="btn btn-medium btn-primary" id="resetpayment-btn">
<i class="icon icon-circle-arrow-down"></i><span>Vælg en anden betalingsmetode</span>
</button>
</div>
</div>
</div>
</div>
EDIT! This reproduces my problem: http://jsfiddle.net/mPWw4/3/
Why is the two connected so that a click on the first ones body opens the other?
Move your modals outside of your main html. I would recommend somewhere close to the to the end of your </body> tag.
Also just as a side note some of your markup on the modals e.g. <div class="modal-dialog"> and <div class="modal-content"> is for Bootstrap 3.0 since your using bootstrap 2.3.2 you don't really need it.
I updated your fiddle by moving the modals out of the main html and it works as expected.
http://jsfiddle.net/mPWw4/4/