禁止关闭 Twitter Bootstrap 模式窗口答案

【问题标题】：Disallow Twitter Bootstrap modal window from closing禁止关闭 Twitter Bootstrap 模式窗口
【发布时间】：2012-04-11 06:25:37
【问题描述】：

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

有人可以分享 jQuery 代码吗？

【问题讨论】：

您这样做可能有完全正当的理由（可能还有很多其他理由）。然而，值得注意的是，一般来说，用户体验方面的考虑会建议不要这样做——大多数用户希望点击退出模式会将“下面”的内容带到“前面”。
@Trevor 这就像modal 的反面。
如果后台有一个页面，只有用户先登录才能激活。通过单击模态 Ok 按钮，用户将被重定向到登录页面。如果用户可以直接点击退出，这意味着用户跳过了登录页面，只是在没有登录的情况下访问了该页面。万事俱备
@Trevor 我没有看到任何证据支持你的说法。
该功能在用户必须在模态中填写许多表单字段的场景中是明智的。如果用户不小心点击了模态框以外的地方，那么所有输入的细节都会丢失；然后他们将不得不重新激活模式并重新填充字段。此功能将避免这种刺激。

标签： jquery twitter-bootstrap modal-dialog mouseclick-event

【解决方案1】：

根据引导程序 5 更新的语法如下。
Reference Link

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

【讨论】：

【解决方案2】：

Bootstrap 5 中的属性名称已更改。您可以使用以下内容：

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

【讨论】：

【解决方案3】：

作为答案提出的解决方案不起作用，出了什么问题？

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

<html>
   <head>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/octicons@8.5.0/index.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   </head>
       <body>
       
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
              </div>
              <div class="modal-footer">
                <div class="text-right"><button type="button" class="btn btn-primary">print</button></div>
            </div>
            </div>
          </div>
        </div>
   </body>
</html>

【讨论】：

您应该将此作为新问题发布，而不是作为对现有问题的回答。你的新问题可以参考这篇原帖。

【解决方案4】：

$(document).ready(function(e){

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

});

"backdrop:'static'" 将阻止在模态外部单击时关闭； "keyboard: false" 指定模态框可以通过转义键（Esc）关闭 "show: false" 将在页面加载完成后隐藏模式

【讨论】：

【解决方案5】：

试试主线：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="verifyModalLabel" aria-hidden="true">

【讨论】：

【解决方案6】：

为了在模式显示后更新 Bootstrap 4.1.3 中的背景状态，我们使用了Bootstrap-Modal-Wrapper 插件中的以下行。 Plugin Repository code reference.

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");

【讨论】：

【解决方案7】：

是的，你可以这样做：

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

【讨论】：

这非常适合在 html 中声明模式并且仅通过 javascript 打开的情况 - 即没有指向它的链接。谢谢！

【解决方案8】：

覆盖 Dialog 的 Bootstrap ‘hide’ 事件并停止其默认行为（以释放对话框）。

请看下面的代码sn-p：

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

       e.preventDefault();
   });

在我们的例子中效果很好。

【讨论】：

那么，如何还原呢？
优雅。 thx :) 而@sertaconay 只是创建一个布尔变量（例如），将检查它以确定您是否要阻止默认值
这里唯一在打开模式后起作用的选项
如果您想更好地控制模态框何时可关闭以及何时不可关闭，这是一个完美的解决方案。

【解决方案9】：

有点像@AymKdn 的回答，但这将允许您在不重新初始化模式的情况下更改选项。

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

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

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

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

【讨论】：

stackoverflow.com/questions/16030448/… 不过我不喜欢这个解决方案

【解决方案10】：

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

【讨论】：

这帮助了我。设置“背景：'静态'”后，用户仍然可以通过单击关闭模式；看起来像一个错误，但这成功了！
现在：$('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false});

【解决方案11】：

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

例子：

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

或者，如果您使用的是 JavaScript：

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

【讨论】：

@user1296175 实现此目的的最终代码是什么？我也想这样做。
谢谢@nobita，添加 data-backdrop="static" 就可以了！ Twitter 引导文件很差:(
检查来自@@Varun Chatterji 的答案并将其包含在您的模态定义中
对所有带有单行js的模态框禁用外部点击：$.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
对于 Angular 用户：var modalInstance = $modal.open({ templateUrl: 'modalTemplate.html', controller: 'modalController', background: 'static', });

【解决方案12】：

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

【讨论】：

【解决方案13】：

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

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

【讨论】：

【解决方案14】：

如今，这样做非常容易。只需添加：

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

在您的模态分隔符中。

【讨论】：

多年前在同一页面上提供了此建议。

【解决方案15】：

您可以使用以下代码行设置模式弹出的默认行为：

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

【讨论】：

喜欢 +1 这种方法，我不希望所有模式都使用该选项。

【解决方案16】：

如果您想有条件地禁用backdrop click closing 功能。您可以在运行时使用以下行将backdrop 选项设置为static。

引导 v3.xx

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

引导 v2.xx

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

这将阻止已实例化的模型将 backdrop 选项设置为 false（默认行为）关闭。

【讨论】：

【解决方案17】：

正如 D3VELOPER 所说，以下代码解决了它：

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

我同时使用 jquery 和 bootstrap，只是 removeData('modal') 不起作用。

【讨论】：

【解决方案18】：

嗯，这是你们中的一些人可能正在寻找的另一种解决方案（就像我一样......）

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

此处介绍的解决方案并非 100% 有效。

我的解决方案是这样的：

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;
     });
}};

所以我暂时阻止模态关闭：

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

但是 var is_loading 将在 iframe 加载后重新启用关闭。

【讨论】：

【解决方案19】：

您可以禁用背景的点击关闭行为，并通过将此 JavaScript 添加到您的页面将其设为所有模式的默认设置（确保在加载 jQuery 和 Bootstrap JS 后执行）：

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

【讨论】：

【解决方案20】：

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

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

您可能还想将keyboard 属性设置为false，因为这样可以防止通过按键盘上的Esc 键关闭模式。

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

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

【讨论】：

是的，这是最干净、最简单的答案（因为它避免了添加数据属性）。作为参考，backdrop 和 keyboard 在 Options 部分下提到了here in their documentation。
数据属性是要避免的吗？请指导。
@GopalAggarwal：取决于您如何设置模态。如果您将模态与多个锚标记相关联，那么使用数据属性可能是有意义的。但是当每个标签只有一个模式时，我会使用脚本参数，其中每个行为都在一个地方可见。
也是为了避免模态显示立即传入show: false

【解决方案21】：

只需添加这两件事

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

它将禁用退出按钮以及单击任意位置并隐藏。

【讨论】：

这个建议是几年前提供的。

【解决方案22】：

如果有人从 Google 来到这里试图弄清楚如何阻止某人关闭模态框，请不要忘记模态框右上角还有一个需要删除的关闭按钮。

我使用了一些 CSS 来隐藏它：

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

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

【讨论】：

你能不能只从模态标题中删除按钮？
有时使用 CSS 而不是改变 HTML 是有益的。

【解决方案23】：

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

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

【讨论】：

是的，这是最干净、最简单的答案（因为它通过添加数据属性来工作）。作为参考，背景和键盘在其文档中的“选项”部分中提及。
如果您在页面加载时启动模式，这是删除其他关闭选项的最佳方式。