preview modal does not show when page already have a modal overlay

[wyzssw]

i use bootstrap-fileinput on a modal, when i click preview icon ,it does not show up the preview modal,
how can i resovle it or modify the fileinput.js to resovle it

[kartik-v]

You cannot open two modals in bootstrap when other modal is open. This is a bootstrap restriction and mentioned in bootstrap modal docs. It will require custom coding (you can search on web for the same).

Even if you achieve it, there will be another side effect... The full screen mode may not behave properly... Unless the bootstrap fileinput modal is the last latest one on the page.

[wyzssw]

i don't need full screen mode，i search the web found a solution 'http://stackoverflow.com/questions/19305821/multiple-modals-overlay',

$(document).on('show.bs.modal', '.modal', function () {
    var zIndex = 1040 + (10 * $('.modal:visible').length);
    $(this).css('z-index', zIndex);
    setTimeout(function() {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
    }, 0);
});

but it does not work

[sofmorona]

Hi wyzssw,
the code that you wrote works when the modal are at the same level, but if one is inside the other it doesn't work.. I have the same problem, I can't find how to put the modal window of the "zoom" (modalMain) at the same level than the other...

Kartiv-v maybe you can help us with that? how to move the "modalMain" (id="kvFileinputModal") dialog?
thanks in advance!

[sofmorona]

I write here a possible solution, maybe it helps someone...

you can write:
$("#kvFileinputModal").detach().appendTo('.page-content');
where ".page-content" is the parent div where you want to place the preview dialog.

then you need to use the following script:

$(document).on('show.bs.modal', '.modal', function (event) {
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function() {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
        $('.modal').on("hidden.bs.modal", function (e) { //fire on closing modal box
            if ($('.modal:visible').length) { // check whether parent modal is opend after child modal close
                $('body').addClass('modal-open'); // if open mean length is 1 then add a bootstrap css class to body of the page
            }
        });
    });

it will prevent the problem stacking the dialogs and prevent problems when closing the most recent dialog.

[wyzssw]

hi,sofmorona,
finally i resovle this problem by modify fileinput.js

 _listenModalEvent: function (event) {
              ...
              ...
              if (event === 'show') {
                    var zIndex = 1040 + (100 * $('.modal:visible').length);
                    $modal.css('z-index', 9999999);
                    setTimeout(function() {
                        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex -1 ).addClass('modal-stack');
                    }, 0);
                }
                if (event === 'hidden') {
                    $('.modal:visible').length && $(document.body).addClass('modal-open');
                }
                ...
                ...
}