Bootstrap Remove Modal Background

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 class="modal-body">
                <p>Here the description starts here........</p>
            <div class="modal-footer">
                <button type="button" data-backdrop="false" class="btn btn-default" data-dismiss="modal">Close</button>
<!--Modal ends here--->

Try it »

If you run the above example it will produce output something like this-

Bootstrap Remove Modal Background

Using Modal JavaScript

Sometimes we use javascript to show the modal so we can also remove backdrop using jQuery simply as below-

| Example:

<script type="text/javascript">  
  function showModal(){

Try it »


Add Comment

📖 Read More