jQuery Bootstrap multiple modals, how to hide active/top modal only

Question

I've got a modal form that sometimes requires a second modal to be opened to set or display some data. I'm able to launch the first and second modals OK, but when I close the 'top' modal, both modals 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 One:

<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 Two:

<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 the Modal because when you click on the close button you fire a "close" event which hide all the modal. To manually close a modal, call $('#addItemModal').modal('hide');for the first modal and $('#embedModal').modal('hide');.

Now you can put a button in your modal that call these:

Modal One:

<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 Two:

<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

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

so make if possible make it:

<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 remove the data-dismiss="modal" and assign class "close" for example for the link or button i want to use to close modals then using one jquery event I can close/hide just the close button modal.

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

Answer 3

just append your modal to body - after modal created

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

now will closed only active top modal