modal within a modal - how to close only the inner modal

Question

I have a properly working modal that displays an unordered list. One of the item on this list contains a button that opens an inner modal (which in turn contains a video player). This all works well, but when I dismiss the inner modal, both modals (initial and inner) get closed. Code below shows what I've done for the inner modal:

<tr><td>List Item <button class="btn btn-success" data-toggle="modal" data-target="#myInnerModal1"></button>
        <div class="modal" id="myInnerModal1">
            <div class="modal-dialogue">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Title</h4>
                    </div>
                <div class="modal-body">
                    <video class="myVideo" id="preview1" controls>
                        <source src="video.m4v" type="video/mp4">
                    </video>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
</td></tr>

I'd like to find a way to specify in the dismiss-modal class which modal to close (in this case, it would be myInnerModal1).

Answer 1

You don't need any extra or additional function to resolve the problem. Reason both modal get closed when you closed the inner modal because you put modal inside modal, and both modals has close button with same data-dismiss="modal" so clicking inner modal close button also trigger the data-dismiss="modal" of initial modal too.

Fiddle

simple solution is that keep inner modal call button inside the initial modal but remove the inner modal HTML from initial modal and put it outside and it will resolve the problem

Fiddle working example

Reason

Bootstrap doesn't support stacked/simultaneous/overlapping modals;

Overlapping modals not supported

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

Alternate solution Modal within Modal

So If you still want to keep inner modal HTML inside initial modal then following code will do the job and resolve the problem

In inner modal HTML close button change data-dismiss="modal" to data-dismiss-modal="modal2"

<button class="btn btn-default" data-dismiss-modal="modal2">Close</button>

And Add following code

$("button[data-dismiss-modal=modal2]").click(function(){
    $('#myInnerModal1').modal('hide');
});

It will only close the inner modal and keep the initial modal open.

$("button[data-dismiss-modal=modal2]").click(function () {
    $('#myInnerModal1').modal('hide');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<button type="button" class="btn btn-info" 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">&times;</button>
                 <h4 class="modal-title">Modal Header</h4>

            </div>
            <div class="modal-body">
                <tr>
                    <td>List Item
                        <button class="btn btn-success" data-toggle="modal" data-target="#myInnerModal1"></button>
                        <div class="modal" id="myInnerModal1">
                            <div class="modal-dialogue">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button class="close" data-dismiss="modal">&times;</button>
                                         <h4 class="modal-title">Title</h4>

                                    </div>
                                    <div class="modal-body">
                                        <video class="myVideo" id="preview1" controls>
                                            <source src="video.m4v" type="video/mp4">
                                        </video>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-default" data-dismiss-modal="modal2">Close</button>
                                    </div>
                                </div>
                            </div>
                    </td>
                </tr>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>