How to close only the inner modal - when modal is placed within another modal

- February 23, 2018

Problem:

Sometimes you need to call a modal within another modal. Modal will open well, but when you close the inner modal both modals are closing. you want that only the inner modal should close.
assume you are coding like below-

<div class="container">
 <h2>Modal Example</h2>
 <!-- Trigger the modal with a button -->
 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Outer Modal</button>

 <!-- Modal -->
 <div class="modal fade" id="myModal" 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">
 <p>Content for Outer/first modal</p>
 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal-copy">Open Inner Modal</button>
 <!--PLACING INNER MODAL HTML -->
 <div class="modal fade" id="myModal-copy" 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">
 <p>Content for Inner/Second modal</p>
 
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">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>
 
 
 
</div>

In above code you are opening a modal then placing both button and HTML part for Inner modal in its modal-body part.

Solution:

It's a bug when u calling modal within another modal, all active modal will dismiss when click on a particular close button. Because modal doesn't support stacking facility

To prevent this issue you should place HTML part of Inner Modal outside the first modal HTML part

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Outer Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" 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">
          <p>Content for Outer/first modal</p>
          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal-copy">Open Inner Modal</button>
          
          
  
  
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
  <div class="modal fade" id="myModal-copy" 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">
          <p>Content for Inner/Second modal</p>
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
  
  </div>
  
</div>

2. Or You can use $("#yourModal").modal("hide") to manually hide modals, and then removing the data-dismiss attribute of your links.

  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" 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">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" id="CloseModal" class="btn btn-default"> Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

<script>
$(document).ready(function() {
 $('#CloseModal').click(function() {
    alert("The paragraph was clicked.");

     $('#myModal').modal('hide');
 });
});
</script>

CodeKhel