Menu
I am using bootstrap to show a simple modal window, for some reason though the modal is not blocking any content below it, so I can still click, write and do whatever I want even when the modal shows. Anyone knows how to change it so it actually blocks all other content?
That is all the code there is to this example (no js files or nothing):
<html>
<head>
<link href="lib/bootstrap-2.3.2/css/bootstrap.css" rel="stylesheet" />
<script src="lib/jquery-2.0.3/jquery.js"></script>
<script src="lib/bootstrap-2.3.2/js/bootstrap.js"></script>
</head>
<body>
<div class="content" >
<div class="modal" >
<div class="modal-header">
<h3>Example title</h3>
</div>
<div class="modal-body">example text</div>
<div class="modal-footer">
<button class="btn">No</button>
<button class="btn">Yes</button>
</div>
</div>
<!-- my form with fields etc is here -->
<label>Example field</label><input type="text"></input>
</div>
</body>
</html>
Here is the result:
I have bootstrap css and js files included, given the example below I can still see the text box even tho the modal is showing...
351
A previous version of 2.3.2 was broken..
I would recommend you upgrade to Bootstrap 3 and use:
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
Or you can use Bootstrap CDN:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
And the Modal Code
197
You could
data-backdrop as static role="dialog"
changed markup :
<div id="the-modal" class="modal hide" data-backdrop="static" data-keyboard="false" role="dialog">
<div class="modal-header">
<h3>Example title</h3>
</div>
...
css :
.modal-backdrop {
background-color: transparent;
}
script :
$('#the-modal').on('show', function() {
$('body').append('<div class="modal-backdrop"></div>');
});
$('#the-modal').on('hide', function() {
$('body').find('.modal-backdrop').remove();
});
$('#the-modal').modal();
see the above in this fiddle -> http://jsfiddle.net/vB8xq/ which btw runs bootstrap 2.3.2!
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
