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...

Relativistic

removed based on what criteria? Can you show some code? – Fradin

Answer 1

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

Dabney

This has been updated in 5.3 to data-bs-backdrop="false" – Ardehs

Answer 2

You can also set

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

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

Dominiquedominium

Absolutely Brilliant.! Simple and sweet. Straight to the point without any fuzz. – Passacaglia

Answer 3

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>

Relativistic

Answer 4

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>

Arcadia

This has been updated in 5.3 to data-bs-backdrop="false" – Ardehs

Answer 5

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

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

Strobile

Answer 6

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

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

Allies

Answer 7

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;
}

Haul

@Manigandaprabhu: #modal-id .modal-backdrop { ... } – Bilbo

in the given example, change opacity: .5; to opacity: .0; – Suetonius

Answer 8

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

This should work as a charm

Hypermeter

Answer 9

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

Orv

Answer 10

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

Polka

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Meleager

Answer 11

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;
}

Suctorial

Answer 12

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".

Radicalism

Answer 13

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.

Tiffanitiffanie

Answer 14

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

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

Aa

Answer 15

Bootstrap 5.2.3

HTML:

<div id="mobile-menu" class="modal fade" aria-labelledby="menuModalLabel" aria-hidden="true" tabindex="-1">
   ....
</div>

JS:

const menuModal = new bootstrap.Modal('#mobile-menu', {
  backdrop: false
});
//show modal:
$(".book").on('click', function(e){
    e.preventDefault();
    menuModal.show();
});

CSS:

if you need only high opacity to backdrop apply this:

.modal-backdrop.show {
    --bs-backdrop-opacity: .1;
}

Eaddy