Menu
I am trying to get modal data-dismiss action working to close the modal on click. There seems to be an issue that I cannot find documented and hopefully someone here can shed some light on it. Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title> Modal test </title>
<link href='themes/default/bootstrap/css/bootstrap.css' rel='stylesheet'/>
<link href='themes/default/bootstrap/css/bootstrap-responsive.css' rel="stylesheet"/>
</head>
<body>
<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
<div class="alert alert-block">
<a class="close" data-dismiss="alert" href="#">x</a>
<h4 class="alert-heading">Warning!</h4>
Best check yo self, you're not...
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="themes/default/bootstrap/js/bootstrap.js"></script>
</body>
</html>
is the full suite of bootstrap including bootstrap-modal.js
I put in the <div class="alert alert-block"> for testing the action, it seems to work in the alert but not the modal!
794
modal-header class is used to define the style for the header of the modal. The <button> inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it. The . close class styles the close button, and the . modal-title class styles the header with a proper line-height.
There are few ways to close modal in Bootstrap: click on a backdrop, close icon, or close button. You can also use JavaScript hide method. Click the button to launch the modal. Then click on the backdrop, close icon or close button to close the modal.
Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time.
To prevent closing bootstrap modal when click outside of modal window we need add properties data-backdrop="static" and data-keyboard="false" to button which we are using to show modal window like as shown following.
add this code please:
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').modal(); // initialized with defaults
$('#myModal').modal('show'); // open your modal dialog
});
</script>
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
