Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wyzssw opened this issue May 28, 2016 · 5 comments
Closed

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

wyzssw opened this issue May 28, 2016 · 5 comments

Comments

@wyzssw
Copy link

wyzssw commented May 28, 2016

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
Copy link
Owner

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
Copy link
Author

wyzssw commented May 28, 2016

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

@kartik-v kartik-v mentioned this issue Jun 3, 2016
@sofmorona
Copy link

sofmorona commented Jun 15, 2016

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
Copy link

sofmorona commented Jun 16, 2016

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
Copy link
Author

wyzssw commented Jun 17, 2016

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');
                }
                ...
                ...
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants