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

Posted 2023-03-05

【中文标题】如何在 Twitter Bootstrap 模式中启用转义键关闭功能？

【英文标题】：How do you enable the escape key close functionality in a Twitter Bootstrap modal?

【发布时间】：2012-09-19 18:10:03

【问题描述】：

我按照Twitter Bootstrap modal on their main documentation page 的说明操作并使用了提到的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>

【问题讨论】：

默认开启

【参考方案1】：

让模态= []

        $(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)
        )

【参考方案2】：

引导程序 3

在 html 中，只需将 data-backdrop 设置为静态，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-closing/

【讨论】：

您的示例没有启用转义键

【参考方案3】：

看起来这是 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>

有关更多信息，您可以查看this issue on github上的讨论

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

【讨论】：

这会阻止输入字段的自动对焦。

如果您从多个位置调用对话框，您还可以将 data-keyboard 属性附加到您的 div.modal（并在调用者中省略它）。

正如@nrek 在下面指出的那样 - 默认情况下关闭转义是真的，所以你并不严格需要 data-keyboard="true" - 它是 tabindex="-1" 启用行为

我可以确认这个解决方案在 Bootstrap 4 中有效。我不知道为什么它在默认情况下不能像文档所说的那样工作。

此外，data-keyboard 属于模态元素，而不是控制器。这可以通过将其设置为false来测试。

【参考方案4】：

将tabindex="-1" 属性添加到模态div

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

</div>

【参考方案5】：

在角度我是这样使用的：

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

背景：'static' => 点击外部时停止关闭 keyboard: false => 使用退出按钮停止关闭

【参考方案6】：

如果您通过 javascript 调用，也可以使用：

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

【讨论】：

这曾经是您唯一需要做的事情，但现在您还需要确保您的 div 具有 'tabindex="-1"' 属性。

我只需要设置标签索引。

@dhacke 那是因为键盘属性默认为真！所以只需设置 tabindex='-1'