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

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).

twitter-bootstrap bootstrap-modal

Solution 1:^[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>

Solution 2:^[2]

The problem with the previous solutions is that the behaviour of the first modal changes after leaving the second modal ! When you do a scroll with the mouse, you can see that it doesn't work the same, the first modal is frozen !

like this : http://jsfiddle.net/ybtj4vkr/ (NO GOOD !!!)

For that I found another solution, while allowing to have a modal "inner":

http://jsfiddle.net/437mt51h/

<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">

        <button class="btn btn-success" id="openmodal2">Open Modal 2</button>

        <table>
          <tr>
            <td>List Item
            </td>
          </tr>
          <tr>
            <td>List Item
            </td>
          </tr>
          // ...

        </table>

        <div class="modal" id="myInnerModal1">
          <div class="modal-dialogue">
            <div class="modal-content">
              <div class="modal-header">
                <button class="close">&times;</button>
                <h4 class="modal-title">Title</h4>

              </div>
              <div class="modal-body">
                modal 2

              </div>
              <div class="modal-footer">
                <button class="btn btn-default" id="closemodal2">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

I handle the opening and closing of the second modal manually with Javascript code : (JQuery)

$(function() {

  $("#closemodal2").click(function () {
    $("#myInnerModal1").hide();
  });


  $("#openmodal2").click(function () {
    $("#myInnerModal1").show();
    $("#myInnerModal1").css('opacity', '1');
  });

});

Solution 3:^[3]

Maybe closing the inner modal using its unique HTML ID with javascript code:

$(function () {
  $('#innerModal').modal('toggle'); // or 'hide' depending on your needs!
});

Solution 4:^[4]

The below code works for me. Remove data-dismiss="modal" in the inner modal and add class name for HTML close button.

<a class="openModal" href="#">
    <i class="fa fa-info-circle" aria-hidden="true"></i>
</a>

<button type="button" class="close closeModal">&times;</button>
 
$('.closeModal').click(function () {
  $('.modal-backdrop').remove();
  $('#innerModal').hide();
});

$('.openModal').click(function () {
    $('#innerModal').modal().show();       
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	BendaThierry.com
Solution 4

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]