防止Bootstrap Modal在外部点击或按下escape时消失？-Java 学习之路

357

我正在使用Twitter Bootstrap模式作为向导窗口，并且希望阻止用户在单击模态外部或按下escape时关闭它 . 相反，我希望在用户按下完成按钮时关闭它 . 我怎么能实现这种情况？

13 回答

706

以下脚本对我有用：

// prevent event when the modal is about to hide
$('#myModal').on('hide.bs.modal', function (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});

回复于 2024-04-29T11:46:42+08:00

37
您可以使用以下代码
```
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
```
更改默认行为 .
回复于 2024-04-29T11:46:42+08:00

202

jQuery('#modal_ajax').modal('show', {backdrop: 'static', keyboard: false});

回复于 2024-04-29T11:46:42+08:00

如果您需要禁用外部单击但启用按下转义

$('#myModal').modal({
    backdrop: 'static',   // This disable for click outside event
    keyboard: true        // This for keyboard event
})

回复于 2024-04-29T11:46:42+08:00

<button class="btn btn-primary btn-lg" data-backdrop="static" data-keyboard="false" data-target="#myModal" data-toggle="modal">

回复于 2024-04-29T11:46:42+08:00

15
也工作， data-backdrop="static" 点击并在你的div模式中_447018_到Esc：
```
<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">
```
回复于 2024-04-29T11:46:42+08:00
9

当我单击模态时你的代码工作，但如果我在模态体内使用html input 字段然后将光标聚焦在该输入上，然后按 esc 键模式已关闭 . 点击here

回复于 2024-04-29T11:46:42+08:00
1
如果您需要在显示模式后设置此项，则可以使用@Nabid解决方案 . 但是，有时您仍需要允许某些方法关闭模态 . 假设你有一个类 really-close-the-modal 的按钮，它应该真正关闭模态，你可以使用这个代码（jquery）：
```
var closeButtonClicked = false;

$('.really-close-the-modal').on('click', function () {
    closeButtonClicked = true;
});

$('#myModal').on('hide.bs.modal', function (e) {
    if (!closeButtonClicked) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    closeButtonClicked = false;
});
```
这不是很好的代码设计，但它帮助我在一个情况下，用一个加载器动画显示模态，直到ajax请求返回，然后才能知道是否需要配置模态以防止“隐式”收盘 . 您可以使用类似的设计来防止在模态仍然加载时关闭模态 .
回复于 2024-04-29T11:46:42+08:00

如果使用JavaScript则：

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

如果是HTML：

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

回复于 2024-04-29T11:46:42+08:00

您也可以在Bootstrap模型中使用Direct .

<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static">

回复于 2024-04-29T11:46:42+08:00

14

我使用这些属性，它的工作原理， data-keyboard="false" data-backdrop="static"

回复于 2024-04-29T11:46:42+08:00
34
只需将data-backdrop =“static”和data-keyboard =“false”属性添加到该模态 .

例如 .
```
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
```
回复于 2024-04-29T11:46:42+08:00

<div class="modal show">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">     

    <h4 class="modal-title">Modal title</h4>
     </div>
     <div class="modal-body">
      <p>One fine body&hellip;</p>
  </div>

  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

我认为这个codepen可以帮助你prevent modal close css and bootstrap

回复于 2024-04-29T11:46:42+08:00

防止Bootstrap Modal在外部点击或按下escape时消失？

13 回答

相关问题