4

I have a bootstrap modal that calls the another bootstrap modal. Now the issue is that when I open the second bootstrap modal and close it the first bootstrap modal does not scroll any more. Instead the scroll is obtained by the background main page. What should I need to do here so that when i close the second modal then the first modal gets focused and obtain the scroll as it was before the second modal. 

$('#modalTrigger').on('click', function () {
    setTimeout(function () {
        $('#modalBody').html($('#contentText').html());
    }, 1000);
});

$('#btnPrimaryModalAction').on('click', function () {
    $('#secondaryModal').modal('show'); 
});

Here is the link to JSFIDDLE that contains the two bootstrap modal which defines the situation mentioned above.

halfer
  • 19,471
  • 17
  • 87
  • 173
Ankit Agarwal
  • 29,658
  • 5
  • 35
  • 59

2 Answers2

6

Bootstrap modal when shown adds a new modal-open class to your <body> element. And when being closed, it removes the modal-open class.

So you only need to re-apply that class to your <body> element when closing the child modal. Here's the thing:

Add a new custom css class for the modals inside your parent modal.

in my case, I use .child-modal,

/* when using a modal within a modal, add this class on the child modal */
$(document).find('.child-modal').on('hidden.bs.modal', function () {
    console.log('hiding child modal');
    $('body').addClass('modal-open');
});

html

<div class="modal fade" tabindex="-1" role="dialog">
     ...
     <a href="#" data-toggle="modal" data-target="#other_modal" title="Help">
       Open the other modal
     </a>
     ...
</div>
<div class="modal fade child-modal" id="other_modal" tabindex="-1" role="dialog">
   ... other codes here ...
</div>
Dexter Bengil
  • 5,265
  • 6
  • 35
  • 51
0

Your issue has to deal with how bootstrap is 'locking' the body element when a modal is opened. On the body element when the modal is opened that will add the class modal-open. When you open the second modal, nothing happens, but when you close it .. it removes that needed class model-open. you need to add some logic to your js to keep that class there until the last modal is closed. It's not really made to be adding modals inside of modals.

I would suggest try using the the modal event methods you have available to you through bootstrap to circumvent that HERE

lscmaro
  • 875
  • 7
  • 21
  • Or you could edit the framework it's self to handle modals inside modals, checking for the `modal-open` class on the body and a visible modal, and handle accordingly. – lscmaro Aug 20 '17 at 21:23