Question

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

Answer 1

如果使用JavaScript，那么：

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

并在HTML中：

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

Answer 2

也适用于data-backdrop="static"点击并在你的div模式中点击data-keyboard="false"到Esc：

<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">

Answer 3

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

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

Answer 4

只需将<head> ... <meta name="viewport" content="width=device-width, initial-scale=1.0"> ... <head/>和@media screen and (max-width: 1000px){ #title{ width:50%; } }属性添加到该模式。

例如

data-backdrop="static"

Answer 5

您可以使用以下代码

$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';

更改默认行为。

Answer 6

我使用这些属性并且有效，Boogeyman

Answer 7

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

Answer 8

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

Answer 9

如果您在模态之外单击，此代码将阻止模态关闭。

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

Answer 10

<button class='btn btn-danger fa fa-trash' data-toggle='modal' data-target='#deleteModal' data-backdrop='static' data-keyboard='false'></button>

只需将data-background和data-keyboard属性添加到打开模型的按钮上即可。

Answer 11

如果您需要禁用外部点击但启用按退出

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

Answer 12

以下脚本对我有用：

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

Answer 13

当我点击模态时你的代码正常工作，但是如果我在模态体内使用html input 字段，那么将光标对准该输入，然后按 {模态已关闭的{1}} 键。点击here

Answer 14

您应该使用背景静态，键盘为假。并可以使用jQuery使用关闭按钮关闭，也可以从模式HTML中删除。希望有帮助。

 $('#MyModal').modal({ backdrop: 'static', keyboard: false });
    $('#MyModal .close').css('display','none');

Answer 15

<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

Answer 16

如果需要在显示之后进行设置，可以使用@Nabid解决方案。但是，有时您仍然需要允许 some 方法关闭模式。假设您有一个类为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请求返回，然后才知道是否需要对模态进行配置以防止“隐式”关闭。您可以使用类似的设计来防止在加载模态时关闭模态。

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

16 个答案: