Enable background when open Bootstrap modal popup - css

Question

I have used modal popup of Bootstrap in my project and want following things:
When open modal popup and click on the background popup should not close.
When open modal popup background should not blur, meaning opening modal popup background should not affect any way.
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">×</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

Answer 2

backdrop="false" will remove background black screen only but it will not allow you to do anything on background element.
To keep background interactive and keeping modal in middle position with full view you need to remove 'modal' class using js code after modal generate.
and need to use some custom css style. Add a custom class with modal
<div class="modal fade custom-modal" id="myModal" role="dialog">
<div class ="modal-dialog" role="document">
<div class ="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header moveable-modal-header"></div>
</div>
</div>
</div>
</div>
//cs styles//
.custom-modal{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: fit-content;
height: fit-content;
padding: 0 !important;
}
.modal-dialog{margin: 0;}
now after populate modal need to remove 'modal' class from myModal div
function openModal(){
$("#myModal").modal({backdrop:false,show:true});
$("#myModal").removeClass("modal");
//this will make modal moveable//
$("#myModal .modal-dialog").draggable({
handle: ".moveable-modal-header"
});
}

Answer 3

If you want to work on input/textarea elements when the modal is open you can use this.
$('#myModal').on('shown.bs.modal', function() {
$(document).off('focusin.modal');
});

Answer 4

We had been struggling with modals opening in background since 6 months and the following settings has resolved it for all our clients:Please change the cache behavior in IE from “automatic” to “Every time the page changes”.