Open boostrap modal on top of another modal

Question

I have been trying to follow the tips in this topic Bootstrap: Open Another Modal in Modal but I don't seem to be getting any results. I have two modals, the main one with id testModal and another one that opens when a link is clicked, with id salesModal.

$(document).on('show.bs.modal', '#salesModal', function (event) {
    //alert('Test Modal');
         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 the salesModal still opens behind the testModal. Which part am I missing and doing wrong? As you can see, I had a debug alert in there to ensure that I am reacting at the right time, ie. when salesModal opens and that works fine.

Inspect your html with the developer console in chrome and check the z-index of each respective modal. Make sure the 2nd interior modal has a higher z-index. — Chris Hawkes, Oct 02 '18 at 14:52
maybe duplicate of https://stackoverflow.com/questions/19305821/multiple-modals-overlay — daddygames, Oct 02 '18 at 14:56
@ChrisHawkes that was it. The 2nd modal still had a lower z-index than the first one. Thank you :) — artlemaks, Oct 02 '18 at 14:56

score 0 · Answer 1 · answered Oct 02 '18 at 15:11

Layering Modals in Bootstrap can be strange but here is a quick bootply of how I normally do it. When the HTML is properly nested it should behave like below: https://www.bootply.com/zg3CRlEMkV#

However when using the data-dismiss="modal" This will close all of the open modals. So you need to close the nested one via a JS call with an on click.

Open boostrap modal on top of another modal

1 Answers1