如何在 Twitter Bootstrap 模式中启用转义键关闭功能？

Question

我按照其主文档页面上的 Twitter Bootstrap 模式说明进行操作
，并使用了提到的

data-keyboard="true"

语法，但转义键不会关闭模式窗口。
我还缺少其他内容吗？

代码：

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal'>
  <div class='modal-body'>
    <div>Test</div>
  </div>
</div>

Answer 1

看起来这是如何绑定 keyup 事件的问题。

您可以向模态添加

tabindex

属性来解决此问题：

tabindex="-1"

所以你的完整代码应该如下所示：

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal' tabindex='-1'>
    <div class='modal-body'>
    <div>Test</div>
    </div>
</div>

欲了解更多信息，您可以查看 github 上此问题的讨论

（更新了新 TWBS 存储库的链接）

Answer 2

如果您通过 javascript 调用，请使用此：

$('#myModal').modal({keyboard: true}) 

Answer 3

向模态 div 添加

tabindex="-1"

属性

<div id="myModal" class="modal fade" role="dialog" tabindex="-1">

</div>

Answer 4

在 Angular 中我这样做：

var modalInstance = $modal.open({                        
 keyboard: false,
 backdrop: 'static',
 templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
 controller: 'currentlyIneligibleCtrl',
 resolve: {
     data: function () { return param; }
    }
});

• backdrop: 'static'

  => 点击外部停止关闭

• keyboard: false

  => 使用退出按钮停止关闭

Answer 5

让情态动词 = []

        $(document).keyup(function(e) {
            if((e.key=='Escape' || e.key=='Esc' || e.keyCode==27) && modals.length) {
                $(".modal[modal='" + modals.pop() + "']").modal('hide')
            }
        })
        
        $(".modal").on("shown.bs.modal", e => {
            const id = modals.length
            modals.push(id)
            $(e.target).attr("modal", id)
        })

Answer 6

引导程序3

在 HTML 中，只需将

data-backdrop

设置为 static，并将

data-keyboard

设置为 false

示例：

<button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch modal</button>

或

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
}) 

现场测试：

https://jsfiddle.net/sztx8qtz/

了解更多：http://budiirawan.com/prevent-bootstrap-modal- opening/