Hide first modal behind overlay if second modal is opened

Question

I have a modal that contains a button which triggers second modal. The problem is the second modal's overlay is not hiding first .It only make the background more darker How can i do make second modals overlay hide first modal?

enter image description here

Code

<div class="container">
    <h3>Modal Example</h3>
    <!-- Button to trigger modal -->
    <div> <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
    </div>
    <!-- Modal -->
    <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3>First Modal</h3>
        </div>
        <div class="modal-body"> <a href="#myModal2" role="button" class="btn" data-toggle="modal">Launch Second Modal</a>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>
<div id="myModal2" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Second Modal</h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>
</div>

Demo http://jsfiddle.net/h3WDq/2/

Duplicated: please ref. https://stackoverflow.com/q/19305821/3845970 — sanjeev shetty, Apr 17 '20 at 20:45

score 1 · Accepted Answer · edited Oct 06 '14 at 23:41

1

i have this jquery solution. If someone has any css solution pls suggest me

$('#myModal2').on('show.bs.modal', function() {  
    $('.modal').not(this).addClass('opac');
});

$('#myModal2').on('hide.bs.modal', function () {
     $('.modal').not(this).removeClass('opac');
})

http://jsfiddle.net/h3WDq/5/

edited Oct 06 '14 at 23:41

Leniel Maccaferri

100,159
46
371
480

answered Dec 30 '13 at 14:02

Ace

841
9
23

score 0 · Answer 2 · answered Dec 30 '13 at 14:10

0

You should differentiate the fist backdrop from the second, so the z-index of the first is lower than the first modal and the z-index of the second backdrop is higher than the first modal but lower than the second.

answered Dec 30 '13 at 14:10

Digger

718
1
9
22

1

I don't thing bootstrap assign a class or anything to differentiate overlay is of particular modal. It just assigns `modal-backdrop in` – Ace Dec 30 '13 at 14:15

score -1 · Answer 3 · answered Dec 30 '13 at 13:58

-1

You can simply hide the first modal when opening the second one.

Here is the modified jsfiddle: http://jsfiddle.net/patrickhaede/h3WDq/4/

<a href="#myModal2" role="button" class="btn" data-toggle="modal" data-dismiss="modal">Launch Second Modal</a>

Is that what you meant?

answered Dec 30 '13 at 13:58

patrick

881
2
9
32

Dont want to hide the modal – Ace Dec 30 '13 at 14:01

Hide first modal behind overlay if second modal is opened

3 Answers3