禁止Twitter Bootstrap模式窗口关闭

Question

我正在使用Twitter Bootstrap创建一个模态窗口.默认行为是,如果单击模态区域外,模态将自动关闭.我想禁用它 - 即在模态外部单击时不关闭模态窗口.

有人可以共享jQuery代码来做到这一点吗？

Answer 1

我相信你想将背景值设置为静态.如果要在使用Esc键时避免关闭窗口,则必须设置其他值.

例:

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

或者如果您使用的是JavaScript:

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

Answer 2

只需将backdrop属性设置为'static'.

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

您可能还希望将keyboard属性设置为,false因为这可以通过按Esc键盘上的键来阻止模态关闭.

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

myModal 是包含模态内容的div的ID.

Answer 3

您还可以在模态定义中包含这些属性:

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

Answer 4

如果您已经初始化了模态窗口,那么您可能希望重置选项$('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})以确保它将应用新选项.

Answer 5

覆盖Dialog的Bootstrap"hide"事件并停止其默认行为(以配置对话框).

请参阅以下代码段:

   $('#yourDialogID').on('hide.bs.modal', function(e) {

       e.preventDefault();
   });

它在我们的情况下工作正常.

Answer 6

是的,你可以这样做:

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">

Answer 7

有点像@ AymKdn的答案,但这将允许您更改选项而无需重新初始化模态.

$('#myModal').data('modal').options.keyboard = false;

或者,如果您需要做多个选项,JavaScript with会在这里派上用场!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

如果模态已经打开,则这些选项仅在下次打开模态时生效.

Answer 8

只需添加这两件事

data-backdrop="static" 
data-keyboard="false"

它现在看起来像这样

<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

它将禁用转义按钮以及任何位置的单击并隐藏.

Answer 9

您可以通过将此JavaScript添加到页面中来禁用后台的单击关闭行为并将其设置为所有模式的默认值(确保在加载jQuery和Bootstrap JS后执行):

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

Answer 10

正如D3VELOPER所说,以下代码解决了它:

$('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false});

我正在使用jquery和bootstrap,根本removeData('modal')不工作.

Answer 11

BS 5

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
   ...
  </div>
</div>

BS 4.4

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
   ...
  </div>
</div>