bootstrap 模态框禁用空白处点击关闭

禁用Bootstrap模态框自动关闭
原创 已于 2022-10-25 18:15:02 修改 · 610 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap #前端 #html

于 2017-07-03 15:56:01 首次发布
本文介绍如何在使用Bootstrap3模态框作为信息编辑窗口时，避免因误触空白区域而导致模态框自动关闭的问题。通过设置特定选项，可以有效防止意外关闭，提升用户体验。

bootstrap 3 模态框为信息编辑窗口,默认点击空白处会自动关闭，但是有的时候这个功能需要关闭，比如编辑信息，一不小心点击了空白处，那就要重新编辑了。

bootstrap 3 模态框禁用空白处点击关闭
$('#myModal').modal({backdrop: 'static', keyboard: false});
backdrop:static时,空白处不关闭.
keyboard:false时,esc键盘不关闭.

作者：zqifa

出处：https://www.l1mn.com

小白IT:如何快速写出一个前端页面（网页），Python中如何使用前端语言什么是？JavaScript？BOM&DOM？Bootstrap？？
yidianyidei的博客
05-19 4549
JavaScript前端语言 1.什么是JavaScript语言 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。用来给HTML页面增加动态功能 2.ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者–Netscape公司，将JavaScript提交给国际标准化组织ECMA。 次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是
解决bootstrap中下拉菜单点击后不关闭的问题
10-18
今天小编就为大家分享一篇解决bootstrap中下拉菜单点击后不关闭的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
BootStrap 模态框禁用空白处点击关闭
weixin_34232744的博客
06-30 220
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。bootstrap的模态框在默认情况下，点击其他空白区域（通常是遮罩层），模态框会被关闭，那么以下方法就是禁止点击其他区域关闭模态框。 $('#myModal').modal({backdrop: 'static', keyboard: fal...
bootstrap模态框的禁用
ditong2365的博客
04-10 196
项目中途参与 前期用的bootstrap的模态框，但是在用到数据绑定的时候出现了问题，以下便是我的整理 （添加信息里 ，在没有信息输入的情况下 ，并不想让按钮点击 模态框消失。上面是按钮的html） （在对数据进行判断后 ，给它设定 attr属性 ） 其实 也就是bootstrap的 dom操作 毕竟 bootstrap底层是jq写的 转载于:https://ww...
BootStrap 3 模态框禁用空白处点击关闭
02-22 127
模态框为信息编辑窗口,涉及好多内容,填了半天,若一不小心点了空白处..... $('#myModal').modal({backdrop:'static', keyboard:false}); backdrop:static时,空白处不关闭. keyboard:false时,...
bootstrap模态框ESC不退出、点击空白处不退出
threelifeadv的博客
01-12 769
前段页面中使用bootstarp给我们的开发效率带来了极大的提供，比如说打开密码修改弹窗： $("#modifyPassWord").modal("show"); 但是这种情况下，如果需要强制修改密码，那么肯定不能满足我们的需求了，我们只要按一下esc或者点击空白处，弹窗就关闭了，这是我们只需要改为： $("#modifyPassWord").modal({backdrop:'stati...
Bootstrap模态框禁用空白处点击关闭
09-01
禁用空白处点击关闭模态框的方法有两种： 1. 使用JavaScript/jQuery： ```javascript $('#myModal').modal({ backdrop: 'static', keyboard: false }); ``` 这段代码会阻止用户点击模态框之外的遮罩层关闭...
BootStrap 模态框实现刷新网页并关闭功能
08-31
本篇文章将详细介绍如何利用Bootstrap模态框实现刷新网页并关闭的功能，以及如何禁用空白处点击关闭模态框。 首先，我们需要了解Bootstrap模态框的事件绑定机制。Bootstrap提供了多种与模态框相关的事件，包括`show...
BootStrap 模态框禁用ESC关闭、禁用点击空白处关闭
HilaryHe
06-12 5692
data-keyboard=false,禁用按ESC关闭，data-keyboard=true,开启按ESC关闭，默认开启。data-backdrop="static"：指定一个静态的背景，当用户点击模态框外部时不会关闭模态框，默认开启。
Bootstrap 模态框（Modal）点击空白区域禁止关闭
SuperCookies的博客
06-25 5624
Bootstrap 模态框（Modal）点击空白区域禁止关闭 $(‘#addModal’).modal({backdrop: ‘static’, keyboard: false}); backdrop:static时,空白处不关闭. keyboard:false时,esc键盘不关闭. $("#addModal").modal({ backdrop: "static",//点击空白处不...
bootstrap模态框点击空白处不消失的属性
weixin_30455023的博客
01-22 172
$('#myModal').modal({backdrop: 'static', keyboard: false}); backdrop:static时,空白处不关闭. keyboard:false时,esc键盘不关闭. 转载于:https://www.cnblogs.com/baobaobao/p/6340824.html...
Bootstrap Modal在空白处点击会关闭的解决方法
easyboot的专栏
03-20 1243
<button class="btn btn-primary btn-bg margin" data-toggle="modal" data-target="#modalInput" data-backdrop="static" id="btnAdd">登记</button> data-backdrop="static" 这个...
关于bootstrap 弹窗——点击空白处禁止关闭弹窗
fly_away5的博客
07-12 3511
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
bootstrap 禁用 modal 点击空白处关闭事件
移动互联网开发者
06-25 5898
在使用bootstrap的 modal 时候，会遇到 在弹出的modal  后，点击空白处时 modal也关闭了，怎么禁用空白关闭事件呢 一般使用： $('#modal_id').modal(); 进行关闭，那么这样就会导致点击空白处modal也关闭了，可以采用如下方法： $('#modal_id').modal({backdrop: 'static', keyb
bootstrap3 模态框js的控制
weixin_30328063的博客
06-25 315
通过js控制模态框的显示隐藏 <div class="container"> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="...
bootstrap点击遮罩不关闭弹出框
weixin_43240792的博客
12-22 2656
bootstrap默认状态下点击弹出框周围的遮罩会自动关闭弹出框，可以通过设置backdrop让点击遮罩时不关闭弹出框。 设置方法有两种： 1直接在弹出框的标签上添加 data-backdrop=“static” 2.使用jq对弹出框设置代码： $("#myModal").modal({backdrop:‘static’}); 详解： 效果图： 1、点击打开遮罩层按钮 2、弹出一个隐藏的div...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kingofyz

此处弱弱求打赏～～万一有好心人

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值