September 20, 2017

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

Try it »

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:

<script type="text/javascript">  
  function showModal(){
  $('#modal').modal('show');
  $(".modal-backdrop.in").hide();
  }
  $(window).load(function(){
         showModal();
    });
</script>
</body>

Try it »

Bootstrap Remove Modal Background