Twitter bootstrap 将Twitter引导不可关闭模式转换为可关闭模式_Twitter Bootstrap

Twitter bootstrap 将Twitter引导不可关闭模式转换为可关闭模式

twitter-bootstrap

Twitter bootstrap 将Twitter引导不可关闭模式转换为可关闭模式,twitter-bootstrap,Twitter Bootstrap,我正在使用Twitter引导创建一个无法关闭的模式。这是故意的。但是，十秒钟后，我希望用户能够通过按escape键或在其外部单击来关闭模式。这能做到吗？以下是示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link href="http://

我正在使用Twitter引导创建一个无法关闭的模式。这是故意的。但是，十秒钟后，我希望用户能够通过按escape键或在其外部单击来关闭模式。这能做到吗？以下是示例代码：

<!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>


无法关闭的模式
无法关闭此模式。我想这样做，十秒钟后，按escape键或在模式外单击可导致模式关闭
$（'#myModal'）。on（'显示'，函数（））{
setTimeout（函数（）{
警报（“模式已打开10秒”）；
}, 10000);
});

以下是我的解决方案：

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

HTML:

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

编辑：根据MartinHN的说法，这里有一个更新版本：

JS现在是：

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

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

不幸的是，最干净的方法是调用modal对象的某些方法，这些方法不一定是公共API的一部分，即使这些方法在其范围内在技术上是公共的。这意味着，如果您将此代码投入生产，您必须在升级时仔细检查bootstrap modal.js实现中的更改。以下是如何做到这一点：

$（'#myModal'）。在（'show'，function（）上{
//保留对模态对象的引用
var mdl=$（this.data（'modal'））
setTimeout（函数（）{
log（'模式已打开10秒'）；
//启用键盘转义
mdl.options.keyboard=true
mdl.escape（）
//但在将来的节目活动中重新禁用它；）
mdl.options.keyboard=false
//用hide（）调用替换重新聚焦处理程序
mdl.$background.off（'单击'）
mdl.$background.单击（$.proxy（mdl.hide，mdl））
}，10000）；//十秒钟
});

相关代码位于live示例中的script.js中，默认值为3秒。

一个小改进是在调用

setTimeout

之前设置

disabled

属性，以便在不刷新页面的情况下再次启动模式时工作。谢谢，但我特别寻找escape键，并在模式功能外单击它起作用了！谢谢我也很感谢大家对代码可能会与未来版本的Twitter Bootstrap发生冲突的警告。回答得好。此外，对于bootstrap 3，必须使用数据（'bs.modal'）。任何能够在bootstrap 3中工作的模式之外获得单击的人？@bbodenmiller:对于bootstrap 3，您需要添加

mdl.options.background=true让它工作。
$('#myModal').on('show', function() {
    $('#closeBtn').attr('disabled', 'disabled');
});

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