CODEWITHSUNDEEP
jqueryjquery-uitwitter-bootstrapmodal-dialog
dhruwal patel
dhruwal patel

Reputation: 1

How to show bootstrap modal dialog over another bootstrap modal position

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.

Upvotes: 0

Views: 12113

Answers (3)

lkurylo
lkurylo

Reputation: 1651

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)

Upvotes: 0

nulll
nulll

Reputation: 1603

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

Upvotes: 0

Julien
Julien

Reputation: 417

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)

Upvotes: 1

Related Questions