JQuery bootstrap multiple modals how to hide only active / top modal

Question

I have a modal form, which sometimes requires the second modal to be open to set or display some data. I can run the first and second modals in order, but when I close the “top” modal, both modules are hidden. Is it possible to hide one modal at a time?

Show Modal One:

$('#content').on('click', "a#AddItemModal", function () { var id = $(this).attr('value'); var val = '/AddItems/id:' + id; $('#addItemBody').load(val); $('#addItemModal').modal({}); }); 

Modal:

 <div class="modal fade hide" id="addItemModal" tabindex="-1" role="dialog"> <div class="modal-body"> <p id="addItemBody"></p> </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" id="good">Close</a> </div> </div> 

Show modal two:

 $('#test_embed').click(function () { var val = $('#formEmbed').val(); $('#myModalLabel').html('Embed Preview'); $('#embedBody').html(val); $('#embedModal').modal({}); }); 

Modal second:

 <div class="modal fade hide" id="embedModal" tabindex="-1" role="dialog"> <div class="modal-header"> <h3 id="myModalLabel">Embed Preview</h3> </div> <div class="modal-body"> <p id="embedBody"></p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal">Close</button> </div> </div> 

Answer 1

I think you should manually close Modal, because when you click the close button, you fire the close event, which hides all the modal ones. To manually close the modal, call $('#addItemModal').modal('hide'); for the first modal and $('#embedModal').modal('hide'); .

Now you can put a button in your mod that calls them:

Modal:

 <div class="modal fade hide" id="addItemModal" tabindex="-1" role="dialog"> ... <div class="modal-footer"> <a href="#" class="btn" data-number="1" id="good">Close</a> </div> </div> 

Modal second:

 <div class="modal fade hide" id="embedModal" tabindex="-1" role="dialog"> ... <div class="modal-footer"> <button class="btn" data-number="2">Close</button> </div> </div> 

JavaScript:

 $("button[data-number=1]").click(function(){ $('#addItemModal').modal('hide'); }); $("button[data-number=2]").click(function(){ $('#embedModal').modal('hide'); }); 

Answer 2

Usually I am sure that the second modal is not a child modal inside the parent. Because data-dismiss="modal" closes the current modal and all parent modals.

do if possible do this:

 <div class="modal fade" id="Model1" tabindex="-1" role="dialog"> </div> <div class="modal fade" id="Model2" tabindex="-1" role="dialog"> </div> 

Not

 <div class="modal fade" id="Model1" tabindex="-1" role="dialog"> <div class="modal fade" id="Model2" tabindex="-1" role="dialog"> </div> </div> 

Or, I delete data-dismiss="modal" and assign the class "close", for example, for the link or button that I want to use to close the modals, and then with a single jquery event. I can close / hide only the button close button.

  $('#mycontainer').on('click', '.modal .close', function () { $(this).closest('.modal').modal('hide'); }); 

Answer 3

just add your modal to the body - after creating the modal

$('body').append('#addItemModal');

now only the active top modal will be closed