我正在使用 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>
不幸的是，最干净的方法是调用modal对象不一定是公共 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
});
Plunk
相关代码位于脚本.js在实际示例中，默认为 3 秒。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
