6

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

4
  • 1
    How are you closing the modal? you can try with a button and calling the js $('#theIdOfTheModal').modal('hide');
    – Bak
    Oct 15, 2015 at 19:29
  • i updated my initial post to show the code. I am closing the modal using a button, where in the code shall i call the js function to force the modal to close (sorry, probably stupid question, am a complete JS beginner...) thx
    – OliG
    Oct 15, 2015 at 19:56
  • Try with $("#myInnerModal1").modal("hide");
    – Bak
    Oct 15, 2015 at 19:58
  • I added an id to the button used to close the inner modal (say 'closeMyModal), and then defined the following function: $(".closeMyModal").click(function () { $("#myInnerModal1").modal("toggle"); }); but this still closes both modals...
    – OliG
    Oct 15, 2015 at 20:59

4 Answers 4

16

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>

1
  • Good catch, and raising another javascript event's name is a good way to go. Oct 16, 2015 at 17:57
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');
  });

});
0

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

$(function () {
  $('#innerModal').modal('toggle'); // or 'hide' depending on your needs!
});
1
  • thx for your answer. as i just posted in a comment to Bak, I tried what you suggest, but this still closes both modal...
    – OliG
    Oct 15, 2015 at 21:01
0

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();       
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.