title: Modal on Modal with Jquery
body: <p>I need to open a modal on another modal, the problem is that the first modal loses the scrool bar of the main page after closing the modal that is on it.</p>
  
  <p>I'll try to explain better:</p>
  
  <p>I have this modal which loads in the modal-body a content that can be extensive coming from a query in Ajax</p>
  
  <pre><code>&lt;div class="modal fade" id="modal_1"&gt;
    &lt;div class="modal-dialog modal-lg" role="document"&gt;
       &lt;div class="modal-content"&gt;
             &lt;div class="modal-header"&gt;
                   &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                   &lt;h4 class="modal-title" id="myModalLabel"&gt;Concluir &lt;/h4&gt;
             &lt;/div&gt;
            &lt;div id="modal-body" class="modal-body"&gt;&lt;/div&gt;                                
      &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I load the information to be displayed in the modal-body  in the following Jquery action:</p>
  
  <pre><code>$(document).on('click', '#btn_open_modal1', function (event) {
  event.preventDefault();        
       $.ajax ({
          type: 'POST',
          url: "load.php",
          data: {id : id},
          async: false,
          dataType: "text",     
          success: function(data){           
              $('#modal-body').html(data);
              $('#modal_1').modal('show');   
          }
        })
  })
  </code></pre>
  
  <p>In this modal that will open has a button to call another modal</p>
  
  <pre><code>&lt;button class="btn btn-success btn-block" id="confirm"&gt;Confirm&lt;/button&gt;
  </code></pre>
  
  <p>In this modal that will open has a button to call another modal
  clicking this button launches a new Ajax call to open a new modal</p>
  
  <pre><code>&lt;div class="modal fade" id="modal_2"&gt;
    &lt;div class="modal-dialog modal-sm"&gt;
       &lt;div class="modal-content"&gt;
         &lt;div class="modal-header text-white bg-dark"&gt;Confirm: &lt;/div&gt;
              &lt;button class="btn btn-secondary btn-no" data-dismiss="modal"&gt;No&lt;/button&gt;
              &lt;a class="btn btn-primary text-white btn-yes" id="btn-yes"&gt;Yes&lt;/a&gt;
  
         &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>and in Jquery</p>
  
  <pre><code>$(document).on('click', '#confirm', function(event){ 
  event.preventDefault();                             
      $("#modal_2").modal().find("#btn-yes").off('click').on("click", function(event){ 
             event.preventDefault();                    
                   $.ajax ({
                        type: 'POST',
                        url: "update.php",
                        data: {id : id},                 
                        dataType: "text",     
                        success: function(data){ 
                                  $('#modal_2').modal('hide');                                                      
                              }
                   })   
           })    
      })
  </code></pre>
  
  <p>In this modal that will open has a button to call another modal
  clicking this button launches a new Ajax call to open a new modal.
  When I close modal_2, modal_1 loses scrool and it is no longer possible to scroll the page.
  I skidded a lot about Modal over Modal, but I did not find anything that uses Jquery (Ajax) and that the modal content is large enough to scroll the page and that it is influenced by the modal upper</p>