Enable background when open Bootstrap modal popup

1) When open model popup and click on the background popup should not close.

Include data attributes data-keyboard="false" data-backdrop="static" in the modal definition itself:

<div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static">
    // Modal HTML Markup
</div>

2) When open model popup background should not blur. meaning opening model popup background should not affect any way.

Set .modal-backdrop property value to display:none; 

.modal-backdrop {
    display:none;
}

3) After open model popup user can also work on the background that time popup should not close.

Add values in .modal-open .modal

.modal-open .modal {
    width: 300px;
    margin: 0 auto;
}

SideNote: you may need to adjust the width of modal according to screen size with media queries.

Disclaimer: This answer is only to demonstrate how to achieve all 3 goals If you have more then one bootstrap modal, above changes will effect all modals, highly suggesting to use custom selectors.

.modal-backdrop {
  display: none !important;
}
.modal-open .modal {
    width: 300px;
    margin: 0 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br>

<div id="myModal" class="modal fade" role="dialog" data-backdrop="static">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Working Fiddle Example

Tags:

Css

Twitter Bootstrap

Bootstrap Modal

Recent Posts