Twitter bootstrap - open modal over an already opened modal

Question

Here's my scenario: I'm opening a modal window with some record details, and I've a "Delete" button. When user clicks on this button, I need to show a "confirmation" modal above/over the existing modal (asking "are you sure?"), but when this confirmation modal is showed, it doesn't block the "details" first modal (behind).

Does anyone know how can I do it?

Thanks!

Emmetropia

It would seem that there isn't much in the way of an actual answer, but this extension to the modal class might be the way to go: github.com/jschr/bootstrap-modal – Cloots

A working example can be found at bootply.com/lvKQA2AM28 – Gio

I replied this same problem here: #19528673 – Tiller

Answer 1

All you need to do is place the markup for the confirmation modal lower down in the code than the details modal.

Altocumulus

You're a genius. I looked for this for almost a day. – Selvage

try this with a very long first modal. you will see that after closing the second modal, the background scrolls instead of the foreground. the docs clearly state "Multiple open modals not supported. [This] requires custom code." – Stanchion

interDist - I agree, after finding this out myself. I now only show one modal at a time in my application – Altocumulus

This solution solved my problem - which was that the buttons of the "Confirmation" modal (in my case - "click here otherwise you will be automatically logged out") were not working. – Pyxis

@Stanchion : You can check a workaround here : github.com/twbs/bootstrap/issues/20607#issuecomment-247690824 . basically adding the modal-open class to the body on closing the second modal. – Hassett

Does not work... – Liberalize

Answer 2

It's quite easy to do it. Links in your already opened modal have to look like this:

<a href="NEW URL" data-dismiss="modal" data-toggle="modal" data-target="#newModal">Anchor text</a>

data-dismiss="modal" -> will close that modal = that is the trick!!!!
data-toggle="modal" -> will open new dialog

Enjoy!

Leech

This does not answer the question. – Byran

That did answer the question! The link inside the first modal should be: <a href="" data-toggle="modal" data-target="#newModal">Link</a> – Jahdiel

The scrolling wouldn't work on the second modal if the height is long, as far as I know. – Marshall

The question asks how to have one modal over the other - not how to close one before opening another. – Liberalize

Answer 3

Simply hide #modal and show #modal2 when click on #deleteButton

$("#deleteButton").click(function() {
$('#myModal').modal('hide')
$('#myModal2').modal('show')    
});

Here's a working example: http://jsfiddle.net/baptme/nuUzN/14/

Benefit

The scrolling wouldn't work on the second modal if the height is long. – Marshall

You should detect when the old modal closes first before executing the new modal... Here was my solution: https://mcmap.net/q/119000/-bootstrap-open-another-modal-in-modal – Marshall

The question asks how to have one modal over the other - not how to close one before opening another. – Liberalize

Answer 4

How about adding a z-index to the second modal? Like:

<div class="modal fade" style="z-index:1051">modal content here...</div>

If the value 1051 doesn't work try a higher number, eg. 1061 for Bootstrap 5.

Wertz

z-index = 1050 id default value. I changed z-index of my second modal to 1051 and it works. – Darwin

Quick solution. – Ghiberti

@Darwin your solution saved my day! :) – Lissettelissi

Nice! I tried the z-index and it wasn't working. Didn't realize the defualt was 1050. 1051 did the trick for me too. – Homonym

In Bootstrap 5 the default modal z-index is 1060, while it is 1070 for the next element in order (popover). A value between 1061 and 1069 did the trick for me. – Averi

Answer 5

If you want to keep the first modal in the back, you have to do a couple of things. Note that it is not supported by bootstrap (using bootstrap 4.5).

As @fedda said, you need to specify a z-index on the modal element for it to be over the first one (1050 is the default) and then you have to also set the z-index of the backdrop (everything is darken in the back of the modal) to be over the first one and finally, if your first modal can be scrollable (big modal or small screen), you have to reconfigure the scroll to the first modal when the second one closes.

<div id="modal2" class="modal fade" style="z-index:1055">modal content here...</div>

Then in the script:

$("#modal2").on("hidden.bs.modal", () => 
    {$("#modalintheback").data("bs.modal")._setScrollbar();}
$("#modal2").modal();
$("#modal2").next(".modal-backdrop").attr("style", "z-index:1054;");

Rendition

while this apparently works, I got a js console error from bootstrap if I show two modals at the same time Maximum call stack size exceeded – Skeens