How to remove bootstrap modal overlay?

Question

How to remove bootstrap modal overlay for particular modal. when modal appears background has black color with some opacity is there any option for removing that elements...

removed based on what criteria? Can you show some code? – snowYetis Sep 08 '15 at 13:39 — snowYetis, Sep 08 '15 at 13:39

score 51 · Answer 1 · answered Feb 24 '17 at 09:47

51

Add data-backdrop="false" option as attribute to the button which opens the modal.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="false">
  Launch demo modal
</button>

See modal options

answered Feb 24 '17 at 09:47

Mario Shtika

1,436
19
31

1

This has been updated in 5.3 to `data-bs-backdrop="false"` – AaA Mar 06 '23 at 05:04

score 14 · Answer 2 · answered Jul 18 '17 at 11:01

14

You can also set

.modal-backdrop {
   background-color: transparent;
}

in your css and bootstrap click outside function will still work.

answered Jul 18 '17 at 11:01

Duka

513
1
6
19

Absolutely Brilliant.! Simple and sweet. Straight to the point without any fuzz. – Ajay Kumar May 09 '20 at 19:38

score 12 · Answer 3 · edited Sep 09 '15 at 16:01

12

I was able to use the following snippet to hide the model overlay by just re-hiding the modal when the shown.bs.modal event is triggered.

<script type="text/javascript">
  $('#modal-id').on('shown.bs.modal', function () {
      $(".modal-backdrop.in").hide();
   })
</script>

edited Sep 09 '15 at 16:01

mattr-

5,333
2
23
28

answered Sep 09 '15 at 09:33

Manigandaprabhu

409
1
4
9

score 11 · Answer 4 · answered Feb 02 '20 at 20:29

You can also do it this way if you trigger you modal from javascript, add the data-backdrop="false" to the modal directly Example Below:

 <div class="modal fade" id="notifyModal" data-backdrop="false"
tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" id="info_content">
            A Project has been deleted successfully!
        </div>
    </div>
</div>

This has been updated in 5.3 to data-bs-backdrop="false" – AaA Mar 06 '23 at 05:04 — AaA, Mar 06 '23 at 05:04

score 7 · Answer 5 · answered Dec 07 '18 at 14:11

7

If you are dealing with bootstrap modal through jquery then better you use below code in your event callback function.

$('.modal-backdrop').remove();

answered Dec 07 '18 at 14:11

vitthal-gaikwad

1,184
11
13

score 3 · Answer 6 · answered Dec 08 '18 at 08:41

3

If you using function click in javascript (jquery). You using :

$("#myBtn2").click(function(){
    $("#myModal2").modal({backdrop: false});
});

answered Dec 08 '18 at 08:41

TungHarry

1,097
11
26

score 2 · Answer 7 · answered Sep 08 '15 at 13:44

2

The background is fired with the following class: .modal-backdrop with an additional .in class for opacity.

Default values (edit as needed):

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}
.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}

answered Sep 08 '15 at 13:44

Aibrean

6,297
1
22
38

@Manigandaprabhu: `#modal-id .modal-backdrop { ... }` – undefined Aug 11 '17 at 12:50
in the given example, change `opacity: .5;` to `opacity: .0;` – Hesham Yassin Jan 04 '18 at 09:21

score 0 · Answer 8 · answered Jun 02 '20 at 07:59

0

$("#myModal").on('hide.bs.modal', function(){
    $('.modal-backdrop').remove()
});

This should work as a charm

answered Jun 02 '20 at 07:59

pooza

30
5

score 0 · Answer 9 · answered May 11 '21 at 05:33

0

This works for me. You may try this.

$('.close').click();

$(document.body).removeClass("modal-open");

$("modal-backdrop").remove();

https://github.com/valor-software/ngx-bootstrap/issues/853

answered May 11 '21 at 05:33

John Paul Sale

7
1
1

score 0 · Answer 10 · answered Sep 21 '21 at 10:45

0

  <script>
    $(document).ready(function(){
  $("button").click(function(){
    $("div").removeClass("modal-backdrop");
  });
});
    </script>

answered Sep 21 '21 at 10:45

che

61
1
11

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/29881176) – Procrastinator Sep 22 '21 at 06:07

score 0 · Answer 11 · answered Mar 23 '22 at 14:47

You can use backdropClass, a custom class to append to the modal backdrop (api).

TS

this.modalService.open(MyModalComponent, {
      backdrop: 'static',
      keyboard: false,
      backdropClass: 'no-backdrop'
});

CSS (global style)

.no-backdrop {
  background: transparent;
}

Khalid Ait tirite · Answer 12 · 2022-06-15T09:36:47.150

I had this issue and i solved it by removing the div with class modal-backdrop. after the ajax success.

$.ajax({
         url: 'Your/URL',
         type: 'POST',
         data: formData, // Instance of FormData()
         contentType: false,
         processData: false,
         headers: {
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                   },
         success: function(response) {
              $('.modal-backdrop').remove()
              // Your code here, what you wanna do after the success of your ajax call
                  },
         error: function() {
               console.log('error');
                   },
         complete: function() {
                console.log('complete');
                   }
        })

I'm using : Bootstrap "version": "4.0.5".

score 0 · Answer 13 · answered Jul 19 '22 at 08:36

I had the same problem and found out that ii I simply used javascript to show and hide the modal form and remove the data-target attribute from the button that calls the modal, everything works fine. No need to remove data-backdrop and all of that stuff.

score 0 · Answer 14 · edited Apr 11 '23 at 09:32

0

Add data-bs-backdrop="false" to modal attributes not the button that triggers the modal.

https://getbootstrap.com/docs/4.0/components/modal/

edited Apr 11 '23 at 09:32

Tyler2P

2,324
26
22
31

answered Apr 05 '23 at 14:42

Emmanuel Daitey

1

How to remove bootstrap modal overlay?

14 Answers14

Linked