twitter-bootstrap – 将Twitter Bootstrap Uncloseable Modal转

发布时间：2020-12-18 00:23:05 所属栏目：安全来源：网络整理

导读：我正在使用Twitter Bootstrap来创建一个无法关闭的模态.这是故意的.但是,十秒钟后,我希望用户能够通过按下退出键或单击其外部来关闭模式.可以这样做吗？这是示例代码： !DOCTYPE htmlhtml lang="en" head meta charset="utf-8" title/title link href="http:

我正在使用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实现中的更改.这是怎么做的：

$('#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

相关代码位于实例中的script.js中,默认为3秒.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!