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('hidden.bs.modal', function (e) {
    $('body').addClass('modal-open');
 });

credits: @simonalmar

in your global script file.


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

$('.modal').on("hidden.bs.modal", function (e) {
    if($('.modal:visible').length)
    {
        $('.modal-backdrop').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) - 10);
        $('body').addClass('modal-open');
    }
}).on("show.bs.modal", function (e) {
    if($('.modal:visible').length)
    {
        $('.modal-backdrop.in').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) + 10);
        $(this).css('z-index', parseInt($('.modal-backdrop.in').first().css('z-index')) + 10);
    }
});

credits: @FireSBurnsmuP

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s