Menu
I'm using Twitter Bootstrap to create a modal that can't be closed. This is on purpose. However, after ten seconds, I want the user to be able to close the modal either by pressing the escape key or clicking outside of it. Can this be done? Here is sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-header">
<h3 id="myModalLabel">A Modal That Can't Be Closed</h3>
</div>
<div class="modal-body">
<p>There is no way to close this modal. I would like to make it so that after ten seconds, pressing the escape key or clicking outside the modal causes the modal to close.</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script>
$('#myModal').on('shown', function() {
setTimeout(function() {
alert('The modal has been open for 10 seconds.');
}, 10000);
});
</script>
</body>
</html>
797
modal-header is the class to define style for the header of the modal window. CSS class close sets the style for the Close button of the modal window. data-dismiss is a custom HTML5 data attribute. Here it is used to close the modal window. modal-body is a CSS class of Bootstrap CSS to set the style for body of the modal window.
Twitter Bootstrap Modal are created using a custom Jquery Plugin. It may be used to create modal windows to enrich user experience or to add functionality to users. You may use popover and tooltips within Modals. In this tutorial, it is discussed how to create Modal windows using Twitter Bootstrap with several examples and explanations.
modal-footer is a CSS class of Bootstrap CSS to set the style for footer of the modal window. CSS classes btn and btn-success are used to set the style for the larger button is modal window's footer. You may use any other Twitter Bootstrap buttons instead.
The.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.
Unfortunately, the cleanest way to do this involves invoking some methods of the modal object which aren't necessarily part of the public API, even though the methods are technically public in their scope. This means that if you put this code into production you'll have to be careful to check for changes in the bootstrap-modal.js implementation whenever you upgrade. Here's how to do it:
$('#myModal').on('shown', function() {
// hold a ref to the modal object
var mdl = $(this).data('modal')
setTimeout(function() {
console.log('The modal has been open for 10 seconds.');
// enable keyboard escaping
mdl.options.keyboard = true
mdl.escape()
// but re-disable it for future show events ;)
mdl.options.keyboard = false
// replace refocus handler with hide() invocation
mdl.$backdrop.off('click')
mdl.$backdrop.click($.proxy(mdl.hide, mdl))
}, 10000); // ten seconds
});
The relevant code is in the script.js in the live example, and defaults to 3 seconds.
127
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