禁用引导模态区域之外的单击以关闭模态

本文翻译自：Disable click outside of bootstrap modal area to close modal

I am making a bootstrap website, with a couple of Bootstrap 'Modals'. 我正在制作一个Bootstrap网站，其中包含几个Bootstrap'Modals'。 I'm trying to customize some of the default features. 我正在尝试自定义一些默认功能。

Problem is this; 问题是这样； You can close the modal by clicking on the background. 您可以通过单击背景关闭模态。 Is there anyway to disable this feature? 反正有禁用此功能？ On specifc modals only? 仅在特定模态上？

Bootstrap modal page 引导程序模式页面

#1楼

参考：https://stackoom.com/question/1VB9V/禁用引导模态区域之外的单击以关闭模态

#2楼

You can use an attribute like this: data-backdrop="static" or with javascript: 您可以使用如下属性： data-backdrop="static"或javascript：

$('#myModal').modal({backdrop: 'static',keyboard: false  // to prevent closing with Esc button (if you want this too)
})

See this answer too: Disallow twitter bootstrap modal window from closing 也请参见此答案：禁止关闭Twitter Bootstrap模式窗口

#3楼

On Options chapter, in the page you linked, you can see the backdrop option. 在“选项”一章的链接页面中，您可以看到backdrop选项。 Passing this option with value 'static' will prevent closing the modal. 将此选项的值设置为'static'将防止关闭模态。
As @PedroVagner pointed on comments, you also can pass {keyboard: false} to prevent closing the modal by pressing Esc . 正如@PedroVagner在评论中指出的那样，您还可以通过按Esc来传递{keyboard: false}以防止关闭模式。

If you opening the modal by js use: 如果您通过js打开模式，请使用：

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

If you are using data attributes, use: 如果使用数据属性，请使用：

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">Launch demo modal</button>`

#4楼

This is the easiest one 这是最简单的一个

You can define your modal behavior, defining data-keyboard and data-backdrop. 您可以定义模态行为，定义数据键盘和数据背景。

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

#5楼

In my application, I am using the below piece of code to show Bootstrap modal via jQuery. 在我的应用程序中，我使用下面的代码通过jQuery显示Bootstrap模态。

 $('#myModall').modal({backdrop: 'static',keyboard: true, show: true});

#6楼

Checkout This :: 结帐此::

 $(document).ready(function() { $("#popup").modal({ show: false, backdrop: 'static' }); $("#click-me").click(function() { $("#popup").modal("show"); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body> <div class="modal" id="popup" style="display: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Standard Selectpickers</h3> </div> <div class="modal-body"> <select class="selectpicker" data-container="body"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> <a id="click-me" class="btn btn-primary">Click Me</a> </body> <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script> </html>

禁用引导模态区域之外的单击以关闭模态相关推荐

Vue3.0 使用 ref 判断目标 node 区域之外的点击事件（实现下拉框、弹窗关闭功能）
有时候会遇到点击目标区域绑定事件 / 展示效果,然后点击目标区域之外的地方就关闭效果 / 触发另一事件,为了实现这样的功能,我们需要通过比对 node 节点来进行判断,在下面我会使用 Vue3.0 的 ...
C# 调用Word（PrintOut) 直接打印,出现“第一节的页边距设于可打印区域之外,是否继续”...
/// <summary> /// 输出到打印机 /// </summary> public void Print() ...
Vue3 自定义指令：ClickOutside（点击当前区域之外的位置）
哈喽,大家好,我是 SuperYing.今天我们聊一个 Vue3 自定义指令 - ClickOutside,顾名思义,就是处理点击当前区域之外的位置的场景. Vue 指令首先,我们先来回顾一下 Vu ...
html模态框插件,如何使用JavaScript构建模态框插件
作为一位Web开发人员而言,模态框(Modal)并不会陌生.就我个人而言,我更为熟悉的是怎么通过CSS来编写一个模态框以及怎么通过CSS给模态框添加一些动效.正好最近工作中也和Modal框杠上了.另外 ...
打开office（Word，Excel等）提示“应用程序无法正常启动(0xc0000142)。请单击确认关闭应用程序”
文章目录前言我的环境报错提示解决方案编程之外前言用了 Typora 后就很少再用 word 了,今天打开world,突然提示应用程序无法正常启动(0xc0000142).请单击&qu ...
【win10问题】——打开PPT显示错误“应用程序无法正常启动(0xc0000142)。请单击确定关闭应用程序。”
问题描述: 打开PPT之后,显示正在更新,过一段时间显示错误提醒:"应用程序无法正常启动(0xc0000142).请单击确定关闭应用程序." 解决方法: win+R–>输入s ...
Linux服务器禁用端口,Suse Linux常用端口开启、关闭、禁用
Suse Linux常用端口开启.关闭.禁用下面貌似没有什么直接开启或者关闭端口的命令,因为若仅仅只是开启了端口而不把它与进程相联系的话,端口的开启与关闭就显得毫无意义了(开了端口却没有程序处理进来 ...
应用程序无法正常启动(0xc000007b)。请单击“确定”关闭应用程序
原文:https://blog.csdn.net/nemo2011/article/details/9003252 应用程序无法正常启动(0xc000007b).请单击"确定"关闭 ...
1.模态分析是什么？为什么采用模态分析？
1.模态分析的概念 (1)模态:物体按照某一阶固有频率振动时,物体上各个点偏离平衡位置的位移是满足一定的比例关系的,可以用一个向量表示,这个就称之为模态. 模态这个概念一般是在振动领域所用,你可以初步 ...

禁用引导模态区域之外的单击以关闭模态

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

禁用引导模态区域之外的单击以关闭模态相关推荐

最新文章

热门文章