danielad danielad - 4 months ago 34
jQuery Question

Remove modal property from Bootstrap modal window

How can you manipulate the modal dialog for bootstrap not to show it as modal window without the gray overlay.

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Answer

1) http://jsfiddle.net/ringstaff/Gbm89/14/ has a working example. All you have to do is add this line of css

.modal-backdrop {background: none;}

2) After modal initiation

$('#XXX').modal({show:true});

just trigger the code below

$('.modal-backdrop').removeClass("modal-backdrop"); 

3) add data-backdrop="false" to and Bootstrap will do the rest.

Example:<div class="modal" id="genericModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">