将 Twitter Bootstrap 不可关闭模式转换为可关闭模式答案

【问题标题】：Convert a Twitter Bootstrap Uncloseable Modal into a Closeable One将 Twitter Bootstrap 不可关闭模式转换为可关闭模式
【发布时间】：2013-04-08 11:14:53
【问题描述】：

我正在使用 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>

【问题讨论】：

我创建了一个功能请求，以添加在创建后更新模态选项的方法。 github.com/twbs/bootstrap/issues/35664

标签： twitter-bootstrap

【解决方案1】：

不幸的是，最简洁的方法是调用 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

相关代码在现场示例的script.js中，默认为3秒。

【讨论】：

成功了！谢谢！我也很欣赏有关代码可能会在未来版本的 Twitter Bootstrap 中破坏的警告。
好答案。此外，对于引导程序 3，必须改用 data('bs.modal')。
任何人都能够在 Bootstrap 3 中获得模式之外的点击？
@bbodenmiller：对于 Bootstrap 3，您需要添加 mdl.options.backdrop = true; 才能让它工作。

【解决方案2】：

这是我的解决方案：http://jsfiddle.net/g5bDC/1/

只需添加一个禁用按钮（在页脚中）并在 X 秒后启用它

HTML：

<div class="modal-footer"> 
    <a href="#" class="btn" disabled=disabled id="closeBtn" aria-hidden="true">Close</a>
</div>

JS：

$('#myModal').on('shown', function () {
    setTimeout(function () {
        $('#closeBtn').removeAttr('disabled').attr('data-dismiss', 'modal');
    }, 5000);
});

编辑：根据 MartinHN，这里是一个更新版本：http://jsfiddle.net/g5bDC/2/

JS 现在是：

$('#myModal').on('show', function() {
    $('#closeBtn').attr('disabled', 'disabled');
});

$('#myModal').on('shown', function() {
    setTimeout(function() {
        $('#closeBtn').removeAttr('disabled').attr('data-dismiss', 'modal');
    }, 2000);
});

【讨论】：

一个小的改进是在调用setTimeout 之前设置disabled 属性，以便在您再次启动模式而不刷新页面时使其工作。
谢谢，但我正在寻找转义键并在模态功能之外单击