bootstrap 模态框禁止点击弹窗外部区域自动关闭

鱼是一只鱼啊

于 2021-12-09 15:44:15 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： bootstrap 模态框 data-backdrop data-keyboard

本文链接：https://blog.csdn.net/honeycandys/article/details/121826750

版权

前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

"这段代码展示了一个HTML模态对话框的实现，通过`data-backdrop="static"`和`data-keyboard="false"`属性，可以禁止用户点击对话框外部区域或按ESC键关闭弹窗，确保特定操作的完整性。"

摘要由CSDN通过智能技术生成

data-backdrop ：禁止点击弹窗外部区域自动关闭
data-keyboard：禁止esc关闭弹窗

<div class="modal fade" id="modal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

鱼是一只鱼啊

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

关于bootstrap 弹窗——点击空白处禁止关闭弹窗

fly_away5的博客

07-12

3348

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传 LaTex数学公式 UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

bootstrap4--模态框、提示框、弹出框、Flex布局、多媒体对象

zxn200125的博客

12-22

3176

bootstrap中模态框、提示框、弹出框、Flex布局、多媒体对象介绍与示例

参与评论您还未登录，请先登录后发表或查看评论

BootStrap 模态框禁用ESC关闭、禁用点击空白处关闭

HilaryHe

06-12

5590

data-keyboard=false,禁用按ESC关闭，data-keyboard=true,开启按ESC关闭，默认开启。data-backdrop="static"：指定一个静态的背景，当用户点击模态框外部时不会关闭模态框，默认开启。

bootstrap 禁用 modal 点击空白处关闭事件

移动互联网开发者

06-25

5763

在使用bootstrap的 modal 时候，会遇到在弹出的modal 后，点击空白处时 modal也关闭了，怎么禁用空白关闭事件呢一般使用： $('#modal_id').modal(); 进行关闭，那么这样就会导致点击空白处modal也关闭了，可以采用如下方法： $('#modal_id').modal({backdrop: 'static', keyb

bootstrap模态框手动开启关闭与设置点击外部不关闭

weixin_33769125的博客

12-03

2143

http://www.cnblogs.com/qlqwjy/p/7491054.html 完整的参考菜鸟教程:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html 1.手动开启与关闭模态框的方法按钮开启与JS函数开启(2种) <!DOCTYPE html> <html> ...

bootstrap点击遮罩层（modal）的时候，禁止模态框被用户关闭手动。

lijwen的博客

11-19

2369

首先，在编写模态框时，div初始化时添加属性 data-backdrop=“static” tableindex="-1"。 <div id="loading" class="modal" data-backdrop="static" tableindex="-1"> ..... </div> 其次，调用modal时增加属性： $(&quo

boostrap中js控制模态框的关闭

热门推荐

liux6687的博客

11-23

2万+

setTimeout(function(){ $('#myModal').modal('hide'); $(".modal-backdrop.fade").hide(); // $("#myModal").trigger("click"); },2000)...

Bootstrap 模态框自定义点击和关闭事件详解

10-18

首先，Bootstrap模态框默认情况下允许用户点击模态框外部的遮罩层（backdrop）来关闭模态框。但有时候我们可能需要禁用这个功能，比如在用户还没有进行保存操作时，防止误点击关闭。要实现这一功能，我们需要在模态...

BootStrap modal模态弹窗使用小结

09-01

Bootstrap模态弹窗（Modal）是前端开发中常用的一个组件，它允许用户在不离开当前页面的情况下与应用程序交互。在Bootstrap框架中，模态弹窗主要用于显示临时信息、确认操作或者进行表单填写等场景。以下是对...

bootstrap之模态框

catherine_sfy的博客

03-01

463

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 ...

可拖拽的bootstrap弹出窗口

07-20

在本项目中，我们关注的是一个可拖拽的Bootstrap弹出窗口，这意味着用户可以通过鼠标点击并拖动来改变弹出窗口的位置。这个功能是通过结合Bootstrap的弹出插件与jQuery UI库来实现的。首先，`Bootstrap` 是一个...

bootstrap点击遮罩不关闭弹出框

weixin_43240792的博客

12-22

2493

bootstrap默认状态下点击弹出框周围的遮罩会自动关闭弹出框，可以通过设置backdrop让点击遮罩时不关闭弹出框。设置方法有两种： 1直接在弹出框的标签上添加 data-backdrop=“static” 2.使用jq对弹出框设置代码： $("#myModal").modal({backdrop:‘static’}); 详解：效果图： 1、点击打开遮罩层按钮 2、弹出一个隐藏的div...

Bootstrap模态框(modal)显示、隐藏与禁用ESC代码实现

BADAO_LIUMANG_QIZHI的博客

04-03

5487

场景对于弹出框bootstrap就有模态框(modal)。有时显示模态框，按键盘上ESC就会关闭模态框，所以在打开模态框时设置其属性。实现 modal显示： $("#apAddAndEidtModel").modal('show'); modal隐藏： $("#apAddAndEidtModel").modal('hide'); modal禁用Esc: $("#ap...

Bootstrap(JS插件库-模态弹出框)

圥儿

08-02

9687

Bootstrap(JS插件库) 标签（空格分隔）： Bootstrap 一、导入JavaScript插件 Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。 1、一次性导入： Bootstrap提...

Bootstrap库之Modals

pan-zy的专栏

10-22

947

Bootstrap库之Modals。 Bootstrap是Twitter推出的一个开发工具包，包含了一些比较常用的CSS，JavaScript代码。使用Bootstrap可以加快前端开发的速度。

bootstrap模态框点击遮罩层时，让模态框不关闭

贵林之恋的博客

05-17

6581

模态框默认情况，当点击遮罩层或者按下esc键时会关闭模态框，项目需求当点击的时候不关闭，自己用了两种办法解决。第一种：直接添加属性 data-backdrop="static" data-keyboard="false"<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelled

html学习笔记

weixin_42457728的博客

09-28

495

点击div实现网页页面跳转 <div onclick="window.open('http://www.mygaytrip.com');">跳转页面，在新建窗口打开网页</div> <div onclick="window.location.href='http://www.mygaytrip.com';">跳转页面，在当前窗口打开网页</div&gt...

Bootstrap模态框（Modal）插件详解及基本使用

3. `data-dismiss="modal"`：用于关闭模态框的属性，一般放在模态框的关闭按钮上。 4. `aria-labelledby="myModalLabel"`：关联模态框标题的属性，用于辅助技术。 5. `aria-hidden="true"`：默认情况下，模态框对...