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

Answer 1

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

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

Answer 2

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>

Answer 3

You can also set

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

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

Answer 4

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

This should work as a charm

Answer 5

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>

Answer 6

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