Bootbox modal is not scrollable after a second modal is opened

Question

JS fiddle: http://jsfiddle.net/9y7nrx9m/2/

I am creating a bootbox dialog initially:

// First dialog
bootbox.dialog({
    message: '<input type="button" value="Open second modal" class="second" />' + '<br/>bar'.repeat(100),
    allowCancel: true
});

Scrolling now affects the dialog box and the web page stays in position.

// Second dialog
bootbox.dialog({message: "Second dialog!", allowCancel: true});

After creating another bootbox dialog/alert/prompt and closing it, scrolling no longer affects the first dialog box. The web page contents move and the first dialog just stays frozen (unexpected behavior). How do I fix this?

Any buttons that are visible on the first dialog can be clicked on and buttons on the main page aren't clickable (expected behavior).

Answer 1

Bootstrap modal are made of single modal viewing, but if we want to show modal over modal then when the current modal gets close the dom gets reset and from body tag modal-open will be removed which caused scrolling issues.

Solution 1

While closing of the second modal at modal-open to body.

 $('.bootbox.modal').on('hidden.bs.modal', function () {
  if($(".modal").hasClass('in')){
             $('body').addClass('modal-open');
         }
})

Solution 1

Solution 2

You can achieve the same with css as well.

.bootbox.modal{
  overflow: auto !important;
}

This will make modal scrollable but there will be 2 scroll bars.

Solution 2

-Help :)