How to remove bootstrap modal overlay?

问题

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

回答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

回答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>

回答3:

You can also set

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

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

回答4:

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

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

回答5:

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

回答6:

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

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

来源：https://stackoverflow.com/questions/32459337/how-to-remove-bootstrap-modal-overlay

标签

twitter-bootstrap

bootstrap-modal