How to remove boot modal overlay?

Question

How to remove boot modal overlay for a specific modal. when the modal background is black with some opacity is there any way to remove these elements ...

Answer 1

Add a parameter data-backdrop="false"as an attribute of a button that opens a modal format.

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

Answer 2

I managed to use the following snippet to hide the model overlay, just hiding the modality when the event fires shown.bs.modal.

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

Answer 3

: .modal-backdrop .in .

( ):

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

Answer 4

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

in your css function and bootstrap will still work.

Answer 5

If you are dealing with bootstrap modal through jquery, then it is better to use the code below in the callback function.

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

Answer 6

If you use a function clickin javascript (jquery). You are using:

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