不允许Twitter启动模式窗口关闭

I am creating a modal window using Twitter Bootstrap. The default behavior is if you click outside the modal area, the modal will automatically close. I would like to disable that -- i.e. not close the modal window when clicking outside the modal.

我正在使用Twitter引导创建一个模态窗口。默认的行为是，如果你在模式区域外点击，模式将自动关闭。我想禁用它——也就是说，当在模式窗口外面点击时，不要关闭模式窗口。

Can someone share jQuery code to do this?

有人能共享jQuery代码吗?

17 个解决方案

#1

I believe you want to set the backdrop value to static. If you want to avoid the window to close when using the Esc key, you have to set another value.

我相信您希望将背景值设置为静态。如果要避免在使用Esc键时关闭窗口，则必须设置另一个值。

Example:

例子:

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

OR if you are using JavaScript:

或者如果你正在使用JavaScript:

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

#2

Just set the backdrop property to 'static'.

将背景属性设置为“static”。

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

You may also want to set the keyboard property to false because that prevents the modal from being closed by pressing the Esc key on the keyboard.

您可能还想要将键盘属性设置为false，因为这样可以通过在键盘上按Esc键来阻止模态的关闭。

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

myModal is the ID of the div that contains your modal content.

myModal是包含您的模式内容的div的ID。

#3

You can also include these attributes in the modal definition itself:

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

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

#4

If you already have initialized the modal window, then you may want to reset the options with $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false}) to make sure it will apply the new options.

如果您已经初始化了模态窗口，那么您可能想要用$('#myModal'). removedata ("modal")重置选项。模式({背景:'static'，键盘:false})，确保它将应用新的选项。

#5

Override the Bootstrap ‘hide’ event of Dialog and stop its default behavior (to dispose the dialog).

覆盖引导“隐藏”对话框事件并停止其默认行为(用于处理对话框)。

Please see the below code snippet:

请参阅下面的代码片段:

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

       e.preventDefault();
   });

It works fine in our case.

它在我们的案例中很有效。

#6

Yes, you can do it like this:

是的，你可以这样做:

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

#7

Kind of like @AymKdn's answer, but this will allow you to change the options without re-initializing the modal.

类似于@AymKdn的答案，但这将允许您更改选项，而无需重新初始化模式。

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

Or if you need to do multiple options, JavaScript's with comes in handy here!

或者如果你需要做多个选项，JavaScript在这里就派上用场了!

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

If the modal is already open, these options will only take effect the next time the modal is opened.

如果模式已经打开，这些选项将只在下次打开模式时生效。

#8

Just add these two things

把这两项相加。

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

It will look like this now

现在是这样的

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

It will disable the escape button and also the click anywhere and hide.

它将禁用escape按钮，也将单击任何地方并隐藏。

#9

You can disable the background's click-to-close behavior and make this the default for all your modals by adding this JavaScript to your page (make sure it is executed after jQuery and Bootstrap JS are loaded):

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

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

#10

As D3VELOPER says, the following code resolve it:

正如d3editorer所说，下面的代码将其解析为:

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

I'm using both jquery & bootstrap and simply removeData('modal') don't work.

我使用的是jquery和bootstrap，而简单的removeData('modal')就不起作用。

#11

The best I found is add this code to the link

我发现最好的方法是将这些代码添加到链接中

<!-- Link -->
<a href="#mdl" role="button"  data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

#12

In case anyone comes here from Google trying to figure out how to prevent someone from closing a modal, don't forget that there's also a close button on the top right of the modal that needs to be removed.

如果有人从谷歌来，想知道如何防止有人关闭一个模态，别忘了在模态的右上角还有一个关闭按钮需要移除。

I used some CSS to hide it:

我用了一些CSS来隐藏它:

#Modal .modal-header button.close {
    visibility: hidden;
}

Note that using "display: none;" gets overwritten when the modal is created, so don't use that.

注意，在创建模式时使用“display: none;”会被覆盖，所以不要使用它。

#13

If you want to conditionally disable the backdrop click closing feature. You can use the following line to set the backdrop option to static during runtime.

如果你想有条件地禁用背景，点击关闭功能。您可以使用下面的行来设置在运行时静态的背景选项。

Bootstrap v3.xx

引导v3.xx

jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';

Bootstrap v2.xx

引导v2.xx

jQuery('#MyModal').data('modal').options.backdrop = 'static';

This will prevent an already instantiated model with backdrop option set to false (the default behavior), from closing.

这将防止已经实例化的模型关闭，其中背景选项设置为false(默认行为)。

#14

You can set default behavior of modal popup by using of below line of code:

您可以通过以下代码行设置模态弹出的默认行为:

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

#15

Doing that is very easy nowadays. Just add:

现在做那件事很容易。添加:

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

In your modal divider.

你的模态分频器。

#16

Well, this is another solution that some of you guys might be looking for (as I was..)

这是你们中的一些人可能正在寻找的另一种解决方案(就像我…)

My problem was similar, the modal box was closing while the iframe I had inside was loading, so I had to disable the modal dismiss until the Iframe finishes loading, then re-enable.

我的问题是相似的，当我的iframe在加载时，模态框正在关闭，所以我必须禁用模态解散直到iframe完成加载，然后重新启用。

The solutions presented here were not working 100%.

这里给出的解决方案不是100%有效。

My solution was this:

我的解决方案是:

showLocationModal = function(loc){

    var is_loading = true;

    if(is_loading === true) {

        is_loading  = false;
        var $modal   = $('#locationModal');

        $modal.modal({show:true});

        // prevent Modal to close before the iframe is loaded
        $modal.on("hide", function (e) {
            if(is_loading !== true) {
                e.preventDefault();
                return false
            }
        });

        // populate Modal
        $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){

            is_loading = true;
     });
}};

So I temporarily prevent the Modal from closing with:

因此，我暂时阻止模态以:

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

But ith the var is_loading that will re enable closing after the Iframe has loaded.

但是，在Iframe加载之后，将重新启用的var is_loading。

#17

<button type="button" class="btn btn-info btn-md" id="myBtn3">Static 
Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h4 class="modal-title">Static Backdrop</h4>
    </div>
    <div class="modal-body">
      <p>You cannot click outside of this modal to close it.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>
   <script>
    $("#myBtn3").click(function(){
     $("#myModal3").modal({backdrop: "static"});
    });
   });
  </script>