Posted in Bootstrap, Code Snippets, Javascript

Quick Fix: Scrolling and Focus when multiple bootstrap modals are open

When more than one modal is opened you might have noticed that after the latter modal loses its focus, the former modal loses its scrolling option, rather page’s body scrolls (if exists, otherwise no scrollbar!). There is a quick fix for this:

Just add:

 $('.modal').on('', function (e) {

credits: @simonalmar

in your global script file.

Still if you face issue when multiple modals are simultaneously open, adding this would fix:

$('.modal').on("", function (e) {
        $('.modal-backdrop').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) - 10);
}).on("", function (e) {
        $('').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) + 10);
        $(this).css('z-index', parseInt($('').first().css('z-index')) + 10);

credits: @FireSBurnsmuP

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s