从外面点击或按逃生时消失防止引导模态？ [重复](Prevent Bootstrap Modal

这个问题已经在这里有一个答案：

从收盘禁止Twitter的引导模式窗口 18个回答

我使用Twitter的引导模式作为一个向导窗口，并想阻止用户从点击模式之外，或按下Esc键时，当关闭它。相反，我希望当用户按下Finish按钮也被关闭。我怎么能做到这一点的情况？

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"点击出来， data-keyboard="false" ，以Esc键在您的DIV模式：

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

Answer 3:

您可以在引导模式使用直也。

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

Answer 4:

只需添加data-backdrop="static"和data-keyboard="false"属性情态。

例如。

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

Answer 5:

您可以使用下面的代码

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

要更改默认行为。

Answer 6:

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

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>

简单的数据背景和数据键盘属性添加到您的按钮上哪种模式是开放的。

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模式，体内场然后集中你的光标放在输入，然后按esc键模式已关闭。点击这里

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可以帮助你预防模式密切CSS和引导

Answer 16:

如果你需要设置这个显示的模式后，您可以使用@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请求返回，也只有这样，我可以知道，如果要配置所需要的模式，以防止“隐性”收盘。您可以使用类似的设计，防止在关闭模式，而它仍然加载。

文章来源: Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape? [duplicate]