如何在另一个引导程序模式位置上显示引导程序模式对话框

Question

How to show bootstrap modal dialog over another bootstrap modal I have one modal dialogue on button click of modal I open another modal window which show after that window and over first modal ? I tried with z-index but it is not working.

Answer 1

You should take a look at this repo : https://github.com/jschr/bootstrap-modal/

It extends Bootstrap'modal plugin to allow multiple modal (and other things)

Answer 2

This solution is very dirty, my scenario was that a form inside a modal submits via ajax, if the response is late I wanted to put another overlay and another modal saiyng "sorry i'm late"

$('body').prepend('<div id="signup-box" class="ajax-is-late widget-box modal-dialog visible"><div class="modal-content"><div class="modal-body"><span style="font-size:25px; margin-left:20px;">bla bla bla...</span></div></div></div><div class="my-dirty-solution modal-backdrop fade in" style="z-index: 1041;"></div>');

as you can see, the overlay i'm creating has a z-layout that is higher than the one of standard bootstrap modals (1040)

<div class="my-dirty-solution modal-backdrop fade in" style="z-index: 1041;"></div>

Both, the overlay and the modal that I added could be accessed and destroyed with

$('.my-dirty-solution').remove();

You could see it in action this way:

• open with Chrome the page
• open the real bootstrap modal
• open Chrome Dev Console
• paste my code and press ENTER

Remember, it's a very dirty and cheeky solution... ;)

Answer 3

Add these css classes:

 .first-level-dialog {
    z-index: 1060;
}

.second-level-dialog {
    z-index: 1040 !important;
}

The first one add to the dialog container (this one with modal css class) that you want to have on first plan (above other).

Finally add handlers for dialog events:

$(document).on('shown.bs.modal', '#modalid', function (e) {
        $('.modal:not(.first-level-dialog)').addClass('second-level-dialog');
    });

    $(document).on('hide.bs.modal', '#modalid', function (e) {
        $('.modal').removeClass('second-level-dialog');
    });

As #modalid set id of the modal you want to have on first plan (the one with the first-level-dialog css class specified)