Question
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):
https://stackoverflow.com/questions/21529772
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<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...
Solution
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
OTHER TIPS
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!
This is tested in the latest Bootstrap. It will block input in the text field.
<div class="content" >
<div class="modal show">
<div class="modal-dialog">
<div class="modal-content" >
<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>
</div>
</div>
<!-- my form with fields etc is here -->
<label>Example field</label><input type="text"></input>
</div>
