禁止关闭 Twitter Bootstrap 模式窗口

Posted 2023-02-16

技术标签:

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

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

有人可以分享 jQuery 代码吗？

【问题讨论】：

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

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

【讨论】：

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

【讨论】：

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

以上是关于禁止关闭 Twitter Bootstrap 模式窗口的主要内容，如果未能解决你的问题，请参考以下文章

将函数绑定到 Twitter Bootstrap 模式关闭

如何在 Twitter Bootstrap 模式中启用转义键关闭功能？

如何处理 Twitter Bootstrap 中的模态关闭事件？

在 asp.net mvc 中实现时，Twitter Bootstrap 模式无法正常工作

关闭 Twitter Bootstrap 导航栏转换动画

如何使用 Twitter Bootstrap 自动关闭警报