132

我按照其主文档页面上有关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>

twitter-bootstrap

— 毅力
source

2

默认情况下启用此功能

— Adam F

301

看起来这是如何绑定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存储库）

— 克雷格·麦格雷戈
source

3

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

— 裸照

3

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

— Vitalik Verhovodov

2

正如@nrek在下面指出的那样-默认情况下，使用转义关闭是正确的，因此您并不需要data-keyboard="true"-正是这样tabindex="-1"才能实现

— Leo

我可以确认该解决方案可以在Bootstrap 4中使用。我不知道为什么默认情况下它不起作用，如文档所述。

— Binar Web

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

— WoodrowShigeru

23

另外，如果您通过javascript调用，请使用以下命令：

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

— 丹尼斯伯
source

15

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

— 巴拉·克拉克

1

我只需要设置标签索引。

— weltschmerz 2015年

@dchacke这是因为键盘属性默认为true！因此只需设置tabindex ='

— 1'– nrek

12

tabindex="-1"向模式div 添加属性

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

</div>

— 特伦蒂
source

3

在角我使用这样的：

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

背景：“静态” =>停止以在单击外部时关闭
键盘：false =>使用逃逸按钮停止关闭

— 阿里·阿德拉维（Ali Adravi）
source

-1

引导程序3

在HTML中，只需设置data-backdrop为static和data-keyboardfalse

范例：

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

— 拉谢杜尔伊斯兰教萨戈尔
source

您的示例未启用转义键

— Binar Web

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

引导程序3

范例：

现场测试：