Bootstrap框架 模态框插件 禁止点击空白处关闭模态框事件

最新推荐文章于 2023-10-26 16:48:12 发布
原创 最新推荐文章于 2023-10-26 16:48:12 发布 · 493 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何通过简单地添加两个属性到Bootstrap模态框的外层div上来禁用点击模态框外区域时关闭模态框的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在我们需要的位置，引入Bootstrap的模态框html代码后，只需要在模态框的最外层div上，加上这两个属性：aria-hidden="true" data-backdrop="static"，即可禁止点击页面空白处，关闭模态框的事件。
js实现模态框点击空白关闭
qq_42535651的博客
01-31 1500
面试的时候被问到了，这个问题我在网上一直没搜索到。不过bootstrap已经实现了。 在学习js事件委托的时候。想到可以解决这个问题。 在document添加点击监听，利用事件的捕获和冒泡，界面上的点击事件最终都会响应到document上，通过event e的target属性来判断是否点击的是模态框，如果不是的话就隐藏。 <script> let modal = docum...
使用bootstrap框架结合JavaScript进行网页设计-评论页
m0_74394367的博客
05-24 1173
1>导航条使用组件中的“导航条”，设置菜单，放在页面顶部。点击菜单中的某些菜单项可跳转页面，通过写js代码实现小屏幕时隐藏搜索框的效果。<2>轮播图使用组件中的“轮播图”，放在菜单下方，使其居中。可以自动轮播图片，鼠标指向图片时停止轮播，鼠标离开图片时继续轮播。单击左侧白框“<”时图片会向左跳转，到达第一张图片继续单击时会跳转至最后一张图片；单击右侧白框“>”时图片会向右跳转，到达最后一张图片继续单击时会跳转至第一张片；单击下方导航列表序号，会跳转到对应的图片，图片下方有对图片的描述。
BootStrap 模态框禁用空白处点击关闭
asd386322349的博客
09-18 210
bootstrap 的模态框在默认情况下，点击遮罩层会关闭，下面是禁止关闭的方法： 　　 1 <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-key...
Bootstrap禁止点击空白处关闭模态框
wqzbxh的博客
10-26 601
网上的都是 data-backdrop="static" 千篇一律，最好是找文档看看。因为版本不一样，小心入坑。
关于模态框点击空白处关闭的解决方法
weixin_34096182的博客
05-08 1535
一般做模态框的时候会要求，点击除了内容的空白处关闭模态框，试了好几种方法，发现不能完全实现此种效果，原来是因为出现了点击触发的冒泡事件： 　　　　$('#modal').click(function(){ $('#modal').hide(); }); $('.content').click(function(e){ ...
Bootstrap模态框禁用空白处点击关闭
09-01
禁用空白处点击关闭模态框的方法有两种： 1. 使用JavaScript/jQuery： ```javascript $('#myModal').modal({ backdrop: 'static', keyboard: false }); ``` 这段代码会阻止用户点击模态框之外的遮罩层关闭...
Web前端----移动端库和bootstrap框架
Python美丽星球--微信(Felixzfb)
11-26 1248
Web前端笔记 第十一部分：js移动端库和bootstrap框架，re正则 1. 移动端js事件 移动端的操作方式和PC端是不同的，移动端主要用手指操作， 所以有特殊的touch事件，touch事件包括如下几个事件： 1、touchstart: //手指放到屏幕上时触发 2、touchmove: //手指在屏幕上滑动式触发 3、touchend: //手指离开屏幕时触发 4、touchcanc...
TN-bottega-madlibs项目：Bootstrap实践与JavaScript应用
Bootstrap提供了一系列预设的CSS样式和JavaScript插件，能够帮助开发者快速构建页面元素如导航栏、按钮、表单、模态框等。 #### JavaScript的应用 JavaScript在本项目中的应用将非常广泛，包括但不限于： - 获取...
小白IT:如何快速写出一个前端页面（网页），Python中如何使用前端语言什么是？JavaScript？BOM&DOM？Bootstrap？？
yidianyidei的博客
05-19 4460
JavaScript前端语言 1.什么是JavaScript语言 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。用来给HTML页面增加动态功能 2.ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者–Netscape公司，将JavaScript提交给国际标准化组织ECMA。 次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是
阻止外层div点击事件
qq_41358175的博客
09-25 465
阻止外层div点击事件pointer-events: none; <div class="out" style="pointer-events: none;"> 　　<div class="in" onClick="inBlock()">点击<br/></div> </div>
js 禁止冒泡 点击页面空白处,隐藏特定的div
等一个晴天
01-29 3403
demo .main { position:relative} #btn { border:none;cursor:pointer;background:#ccc } .layer { position:absolute;height:30px;width:50px;background:#4cff00;di
Bootstrap 模态框避免点击背景处关闭
热门推荐
Vision
06-08 3万+
问题： Bootstap 模态框在用户点击背景空白处时，会自动关闭。解决方法： 在HTML页面中编写模态框时，在div初始化时添加属性 aria-hidden=”true” data-backdrop=”static”，即可。 在需要显示模态框，初始化时，$(‘#myModal’).modal({backdrop: ‘static’, keyboard: false}); 其中 ，backdrop
亲测有效：bootstrap 弹出框点击其他区域时弹出框不消失选项设置
k912120的博客
11-21 2977
将data-backdrop="static"  加入到下方处，亲测有效 &lt;div class="modal fade" id="gcDataModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="
设置bootstrap模态窗页面点击无法消失
WhoWrongsWhere的专栏
06-09 2152
可以在模态窗口中使用data-backdrop="false"特性，让只能点击模态窗口部分才能让模态窗口消失，其他部分点击无效。 如下所示： 创建模态框（Modal）    data-target="#myModal">    开始演示模态框    aria-labelledby="myModalLabel" aria-hidden="true" da
BootstrapDialog点击关闭触发事件
linlinxie的博客
02-24 4071
前端弹框提醒时点击右上角的关闭叉叉后有时需要触发一些操作，比如新增等。 BootstrapDialog.show({ type:BootstrapDialog.TYPE_SUCCESS, size:BootstrapDialog.SIZE_SMALL, closable: function(){ $(this).on("click", function...
bootstrap的 modal禁用空白关闭事件
weixin_42231823的博客
04-23 495
backdrop 为 static 时，点击模态对话框的外部区域不会将其关闭。keyboard 为 false 时，按下 Esc 键不会关闭 Modal。在使用bootstrap的 modal 时候,在弹出的modal 后，点击空白处时 modal也关闭了。进行关闭，那么这样就会导致点击空白处modal也关闭了。
Bootstrap 模态框的使用
风轻云淡，笑看人生得失！
09-25 6724
Bootstrap 模态框的使用 官网中给的例子大概和我下面的一样，当点击修改时，会弹出模态框 div class="modal fade" id="myModal"tabindex="-1" role="dialog"aria-labelledby="myModalLabel"data-backdrop="static" aria-hidden="true">           
bootstrap 模态框 点击空白处不要关闭
最新发布
01-20
### 防止 Bootstrap 模态框在点击空白处时自动关闭 为了防止 Bootstrap 模态框在点击背景或空白区域时自动关闭，可以通过设置 `data-backdrop` 属性为 `"static"` 来实现。这将创建一个静态背景，在用户点击模态框外部时不触发关闭操作[^2]。 另外，如果希望进一步控制通过键盘上的 Escape 键来关闭模态框的行为，则可以设置 `data-keyboard="false"`，这样即使按下 Escape 键也不会关闭模态框[^4]。 下面是一个 HTML 示例代码片段展示如何配置这些选项： ```html <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog" role="document"> <div class="modal-content"> <!-- Modal content goes here --> </div> </div> </div> ``` 上述代码中的 `data-backdrop="static"` 和 `data-keyboard="false"` 设置确保了模态框不会因为点击空白区域或按 Esc 键而意外关闭。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值