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