Bootstrap Remove Modal Background Overlay– Sometimes we need to hide bootatrap popup modal overlay background, it can be done in two ways Using – 1. Modal Option, 2. JavaScript/jQuery. Here in this tutorial we are going to cover the both methods with example & online demo.
Bootstrap Remove Modal Background Overlay | Hide Backdrop Example
You can hide bootstrap popup modal in following ways-
- 1. Using Modal Option
- 2. Using JavaScript
Using Modal Option
You can hide modal background color using modal option data-backdrop=”false” as below
| Example:
<div id="modal" class="modal fade" role="dialog" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Tutorialsplane Modal Demo</h4>
</div>
<div class="modal-body">
<p>Here the description starts here........</p>
</div>
<div class="modal-footer">
<button type="button" data-backdrop="false" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--Modal ends here--->
|
If you run the above example it will produce output something like this-
Using Modal JavaScript
Sometimes we use javascript to show the modal so we can also remove backdrop using jQuery simply as below-
| Example:
|
|