css - Enable background when open Bootstrap modal popup

Question

I have used modal popup of Bootstrap in my project and want following things:

1. When open modal popup and click on the background popup should not close.
2. When open modal popup background should not blur, meaning opening modal popup background should not affect any way.
3. After open modal popup user can also work on the background that time popup should not close.

Answer 1

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>