Bootstrap multiple modals modal-backdrop issue

Question

I have a page where one Bootstrap modal opens another modal.

The problem is that with each opened modal, it adds

<div class="modal-backdrop fade in"></div>

to the HTML code. It's fine for the first one, but since it's opacity: .5; it then makes the page darker on every modal opened. Is there a way to check if a modal-backdrop already exists and in that case not open another one?

I open my modals with either

<a href="" data-target="#modal_01" data-toggle="modal">Modal</a>

or with jQuery:

$('#modal_01').modal('show');

Any help to this problem is greatly appreciated!

Here's a fiddle for your convenience: https://jsfiddle.net/zsk4econ/1/

This is a UI issue - the problem is that you are overlaying multiple modals and causing your increasing darkness issue. The solution is to tidy your workflow so that you only ever have one modal open at a time. Perhaps you could have different divs within the same modal and toggle their visibility / display state - but its extremely bad UI /UX to have one modal open a second whilst the first is still open. Wasn't that long ago that you could not do it. Now its more that you Should not do it. IMO. Also you can tidy your calling link as well - Modal — gavgrif, Sep 20 '16 at 08:05
You can add/remove data-backdrop="false" depends on requirement for the child modals — AB Udhay, Sep 20 '16 at 08:09
@ABUdhay Thanks for that tip! It seems to work but only partially, since then clicking on an empty space doesn't close the modal :( — user1996496, Sep 20 '16 at 08:11
The easiest trick is `.modal { background: rgba(0, 0, 0, 0.5) !important; } .modal-backdrop { display: none !important; }` — Malik Zahid, May 17 '21 at 17:12

score 13 · Answer 1 · answered Sep 20 '16 at 08:11

13

Let CSS handle it.

.modal-backdrop:nth-child(2n-1) {
  opacity : 0;
}

https://jsfiddle.net/zsk4econ/3/

answered Sep 20 '16 at 08:11

cjmling

6,896
10
43
79

Even better than opacity would be `display:none;` – Soturi Jul 19 '22 at 20:46

score 13 · Answer 2 · edited Apr 23 '19 at 09:32

Here is the working demo that I think will fit in your case.

$(".modal").on("shown.bs.modal", function () {
    if ($(".modal-backdrop").length > 1) {
        $(".modal-backdrop").not(':first').remove();
    }
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <div class="container">

        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-body">
                        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModal2" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-body">
                        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal3">Open Modal 3</button>
                    </div>
                </div>
            </div>

        </div>
    </div>

score 9 · Answer 3 · answered Sep 20 '16 at 08:22

9

You can add/remove data-backdrop="false" attribute depends on requirement. Else you can also include css like

.modal-backdrop+.modal-backdrop {
  opacity : 0;
}

answered Sep 20 '16 at 08:22

AB Udhay

643
4
9

score 2 · Answer 4 · edited Jun 16 '17 at 14:37

2

$(document).on('show.bs.modal', '.modal', function () {
    if ($(".modal-backdrop").length > -1) {
        $(".modal-backdrop").not(':first').remove();
    }
});

edited Jun 16 '17 at 14:37

Paul Roub

36,322
27
84
93

answered Jun 16 '17 at 11:33

Nirali Maniar

46
6

well try but it will be better to elaborate it in few line. – Gahan Jun 16 '17 at 11:57
While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Badacadabra Jun 16 '17 at 13:36
Solution worked for me, but agree with the previous comments for providing information on your solution – devHead Feb 05 '20 at 15:34

score 1 · Answer 5 · answered Aug 10 '20 at 11:05

// Make sure only one backdrop is rendered 
 $(document).on('show.bs.modal', '.modal', function () {
        if ($(".modal-backdrop").length > 1) {
            $(".modal-backdrop").not(':first').remove();
        }
    });
    // Remove all backdrop on close
    $(document).on('hide.bs.modal', '.modal', function () {
        if ($(".modal-backdrop").length > 1) {
            $(".modal-backdrop").remove();
        }
    });

Bootstrap multiple modals modal-backdrop issue

5 Answers5

Linked