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!

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: https://github.com/jschr/bootstrap-modal — Joel B, Jun 24 '13 at 22:38
A working example can be found at http://bootply.com/lvKQA2AM28 — CrandellWS, Jun 12 '14 at 04:18
I replied this same problem here: http://stackoverflow.com/questions/19528173/bootstrap-open-another-modal-in-modal/32513228 — Elon Gomes Vieira, Sep 10 '15 at 23:38

score 19 · Answer 1 · answered Feb 12 '15 at 17:46

19

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

answered Feb 12 '15 at 17:46

Rob

406
3
12

You're a genius. I looked for this for almost a day. – Chris Sharp Jun 05 '18 at 12:37
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." – interDist Sep 05 '18 at 05:34
interDist - I agree, after finding this out myself. I now only show one modal at a time in my application – Rob Oct 06 '18 at 09:38
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. – gordon613 Jan 10 '19 at 11:28
@interDist : You can check a workaround here : https://github.com/twbs/bootstrap/issues/20607#issuecomment-247690824 . basically adding the modal-open class to the body on closing the second modal. – Monster Brain Mar 01 '19 at 06:18
Does not work... – TV-C-1-5 Mar 12 '22 at 02:05

score 16 · Answer 2 · edited Sep 23 '14 at 18:50

16

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!

edited Sep 23 '14 at 18:50

Leniel Maccaferri

100,159
46
371
480

answered May 23 '13 at 23:12

Oleg Veselkov

185
1
3

6

This does not answer the question. – darksky Apr 15 '14 at 18:44
2

That did answer the question! The link inside the first modal should be: Link – Mohamed Anis Dahmani Jul 17 '14 at 02:04
2

The scrolling wouldn't work on the second modal if the height is long, as far as I know. – Giraldi May 15 '15 at 02:53
The question asks how to have one modal over the other - not how to close one before opening another. – TV-C-1-5 Mar 12 '22 at 02:05

score 6 · Answer 3 · answered Jun 11 '12 at 16:35

6

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/

answered Jun 11 '12 at 16:35

baptme

10,062
3
52
57

The scrolling wouldn't work on the second modal if the height is long. – Giraldi May 15 '15 at 02:52
You should detect when the old modal closes first before executing the new modal... Here was my solution: http://stackoverflow.com/a/30250853/851045 – Giraldi May 15 '15 at 03:06
The question asks how to have one modal over the other - not how to close one before opening another. – TV-C-1-5 Mar 12 '22 at 02:06

score 5 · Answer 4 · edited Nov 04 '21 at 09:01

5

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.

edited Nov 04 '21 at 09:01

Meilo

3,378
3
28
34

answered Jun 19 '15 at 13:13

fedda

216
4
7

3

z-index = 1050 id default value. I changed z-index of my second modal to 1051 and it works. – Strabek Sep 03 '15 at 13:02
Quick solution. – Avinash Jan 13 '17 at 09:12
@Strabek your solution saved my day! :) – Ali Celebi Jun 19 '19 at 12:44
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. – eaglei22 Apr 23 '20 at 18:13
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. – Meilo Nov 04 '21 at 08:58

score 0 · Answer 5 · answered Jun 17 '20 at 14:52

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

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` — raquelhortab, Jan 12 '23 at 10:10

Twitter bootstrap - open modal over an already opened modal

5 Answers5

Linked