CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3modal-dialogbootstrap-modal
Nhu Trinh
Nhu Trinh

Reputation: 13956

Unable to scroll long modal after stack another modal

I have to modal, modal 1 is long and it open first, I can easily scroll through the page when it appear, Modal 2 is short but when I stack open modal 2 (Open modal 2 when modal 1 still open) and then close modal 2: Modal 1 can no longer scroll. I've tried to hide model 1 then show it again when modal 2 is hide but it not help

$('#modal2').on('hide.bs.modal', function () {
   $("#modal1").modal('show');
});

Upvotes: 1

Views: 669

Answers (3)

Nhu Trinh
Nhu Trinh

Reputation: 13956

OK, after digging, I found a hack, posting here so anyone have the same problem can work around.

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

Upvotes: 3

Lauro182
Lauro182

Reputation: 1697

The hack from @Thinh Hoang Nhu wasn't working for me, but he was on the right track. If anybody stumbles across this same problem, my solution was to add a class to the 2nd modals(the ones I know I open after opening first another modal) and added this function with a small delay.

$('body').on('hide.bs.modal', '.modal2nd', function () {
    setTimeout(function(){
        $('body').addClass('modal-open');
    }, 500);
});

This worked for me.

Upvotes: 1

Rob Quincey
Rob Quincey

Reputation: 2896

The simple answer is that Bootstrap does not support overlapping modals. From their documentation, the first warning says;

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.

More than likely this is one of the reasons why they don't recommend it. I wouldn't personally recommend stacking modals without very good reason, there are probably better ways to do what you want to do, for example, you could simply programatically close the first modal before you open the second, you could change the content of your first modal dynamically, you could use tabs within your modal etc.

It looks like you say you've already closing your first modal before opening the second. Maybe you can expand on that point instead since it's apparent that Bootstrap doesn't support or recommend stacking modals out of the box.

Upvotes: 1

Related Questions