0

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.

dhruwal patel
  • 1
  • 1
  • 1
  • 1
  • you want to show the parent above child or vice-versa? – Unni Kris Apr 16 '13 at 11:38
  • your question seems confusing, can you reword the same. – Unni Kris Apr 16 '13 at 11:48
  • I have one dialog open and in that dialog i have one button on click event od that button another dialog open but that dialog is not showing above first dialog in which button present instead it displaying after first dialog div ends. – dhruwal patel Apr 16 '13 at 11:55
  • @UnniKris, his question is as clear as an air - modal over another modal. You press a button in one modal and it opens the second modal over it. You press "back" button of a browser and the second modal disappears leaving the first modal on the screen. – Green Feb 27 '15 at 04:49
  • Duplicate of http://stackoverflow.com/questions/12715579/in-jquery-ui-dialog-is-it-possible-to-put-a-modal-dialog-on-top-of-another-moda – Magnus H Jul 15 '16 at 19:14

3 Answers3

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)

Julien
  • 407
  • 6
  • 16
  • This plugin has a huge drawback - the button "Back" of a browser doesn't work es expected. If you open a modal over a modal, the "Back" button instead of closing only top modal, leaving underneath modal opened, closes ALL modals at all. – Green Feb 27 '15 at 05:20
0

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

nulll
  • 1,465
  • 1
  • 17
  • 28
0

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)

lkurylo
  • 1,621
  • 33
  • 59