我正在使用Twitter Bootstrap来创建一个无法关闭的模态.这是故意的.但是,十秒钟后,我希望用户能够通过按下退出键或单击其外部来关闭模式.可以这样做吗？这是示例代码：
<!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>
解决方法
不幸的是,最简洁的方法是调用模态对象的某些方法,这些方法不一定是公共API的一部分,即使这些方法在技术上是公开的.这意味着如果您将此代码投入生产,则每次升级时都必须小心检查bootstrap-modal.js实现中的更改.这是怎么做的：
JS
$('#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
});
相关代码位于实例中的script.js中,默认为3秒.