bootstrap模态框通过js控制显示隐藏(学习篇)

已于 2022-03-16 14:32:19 修改
阅读量2.4k 收藏 3
点赞数 2
分类专栏： web前端 文章标签： 前端 bootstrap
于 2022-03-07 13:23:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/skyblue_afan/article/details/123328137
版权

1、显示

//identifier为模态框的id
$('#identifier').modal('show');

2、隐藏

//identifier为模态框的id
$('#identifier').modal('hide');

3、点击模态框以外的背景模态框不关闭

//点击模态框以外的背景模态框不关闭
data-backdrop="static";

4、点击esc模态框不关闭

//点击esc模态框不关闭
data-keyboard="false";
skyblue_afan
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bootstrap模态框弹出效果
06-24
bootstrap模态框弹出效果是一款15种模态框弹出效果代码。
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
08-28
本篇文章主要介绍了Bootstrap 模态框多次显示后台提交多次BUG的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap 模态框（Modal）带参数传值实例
08-29
模态框（Modal）是覆盖在父窗体上的子窗体。下面通过本文给大家介绍Bootstrap 模态框（Modal）带参数传值实例代码，需要的朋友参考下吧
BootStrap 模态框实现刷新网页并关闭功能
08-31
主要介绍了BootStrap 模态框实现刷新网页并关闭的功能，实现方法简单易懂,需要的朋友可以参考下
解决bootstrap模态框数据缓存的问题方法
10-18
今天小编就为大家分享一篇解决bootstrap模态框数据缓存的问题方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Bootstrap框架-弹框，属性控制与js控制（基础）
m0_59745705的博客
11-12 371
保存
使用JS显示/隐藏bootstrap的modal
weixin_41580398的博客
07-17 325
使用JS显示隐藏bootstrap的modal
Bootstrap模态框(modal)显示、隐藏与禁用ESC代码实现
BADAO_LIUMANG_QIZHI的博客
04-03 5248
场景 对于弹出框bootstrap就有模态框(modal)。 有时显示模态框，按键盘上ESC就会关闭模态框，所以在打开模态框时设置其属性。 实现 modal显示： $("#apAddAndEidtModel").modal('show'); modal隐藏： $("#apAddAndEidtModel").modal('hide'); modal禁用Esc: $("#ap...
Bootstrap弹出层Modal模态框的显示与隐藏控制属性
qq_44165157的博客
07-22 1091
//Readonly - 仅弹窗输入框无法输入，直接加在input。 $('#myModal').modal('show') //显示 $('#myModal').modal('hide')//隐藏 //重复点击的隐藏显示有一个很更方便的写法 $('#myModal').modal('toggle')
Modal的显示与隐藏
weixin_41548578的博客
01-19 1775
核心思想 页面完成加载后，为所有含有data-toggle="modal"的元素绑定点击事件 模态框出现的逻辑：先出现遮罩层，再出现模态框 为body增加"modal-open"类，作用是给body增加overflow：hidden隐藏页面的滚动条。给模态框增加overflow-x:hidden;overflow-y:auto美化样式 调用dropback函数，变量shown为true，所以插入...
Bootstrap模态框（Modal）实现过渡效果
08-31
主要为大家详细介绍了Bootstrap模态框（Modal）实现过渡效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap模态框关闭后清除模态框的数据方法
10-18
今天小编就为大家分享一篇bootstrap模态框关闭后清除模态框的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
bootstrap 模态框（modal）实现水平垂直居中显示
08-31
主要为大家详细介绍了bootstrap 模态框modal实现水平垂直居中显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
10-18
今天小编就为大家分享一篇bootstrap模态框弹出和隐藏,动态改变中间内容的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 1102
​​​​​​​。
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 477
官网代码（在取消选中状态的时候不生效）
webman 事务回滚失效问题记录
最新发布
juan9872的博客
04-21 527
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
【1524】java投票管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
qq_251836457的博客
04-18 907
2、开发环境为TOMCAT7.0,Myeclipse8.5开发，数据库为Mysql5.0，使用java语言开发。(5)投票选项管理：对投票选项信息进行添加、删除、修改和查看。(6)投票记录管理：对投票记录信息进行添加、删除、修改和查看。(1)管理员管理：对管理员信息进行添加、删除、修改和查看。(2)用户管理：对用户信息进行添加、删除、修改和查看。(3)公告管理：对公告信息进行添加、删除、修改和查看。(4)投票管理：对投票信息进行添加、删除、修改和查看。4）投票浏览查看、查看投票、投票记录。
bootstrap模态框封装
07-28
对于Bootstrap模态框的封装，你可以按照以下步骤进行操作： 1. 引入Bootstrap库：在你的HTML文件中，确保你已经引入了Bootstrap的CSS和JavaScript文件。可以使用CDN链接或者本地文件。 2. 创建模态框的HTML结构：在HTML文件中添加一个用于模态框的容器元素，例如一个`<div>`元素。给这个元素添加一个唯一的ID，以便在后续的操作中引用它。 3. 触发模态框的按钮或链接：在页面中添加一个触发模态框的按钮或链接。给这个按钮或链接添加一个`data-toggle`属性，并将其值设置为`modal`。然后，将`data-target`属性设置为步骤2中创建的模态框容器元素的ID。 4. 内容填充：在模态框容器元素中添加模态框的内容。这可以是文本、表单、图像等等。根据你的需求进行相应的布局和样式设置。 5. JavaScript交互：为了使模态框能够正常工作，你需要添加一些JavaScript代码。使用jQuery或者原生JavaScript来实现以下功能： - 当点击触发按钮时，显示模态框； - 当点击模态框外部区域或关闭按钮时，隐藏模态框； - 可以通过编写事件处理程序来处理模态框上的表单提交、按钮点击等交互操作。 以下是一个简单的示例代码，演示了如何封装Bootstrap模态框： ```html <!-- 步骤2：模态框的容器元素 --> <div id="myModal" class="modal"> <!-- 步骤4：模态框的内容 --> <div class="modal-content"> <span class="close">×</span> <h2>模态框标题</h2> <p>模态框内容</p> </div> </div> <!-- 步骤3：触发模态框的按钮 --> <button type="button" data-toggle="modal" data-target="#myModal">打开模态框</button> <!-- 步骤5：JavaScript交互 --> <script> // 当点击触发按钮时，显示模态框 $('[data-toggle="modal"]').on('click', function() { $('#myModal').show(); }); // 当点击关闭按钮或模态框外部区域时，隐藏模态框 $('.close, .modal').on('click', function() { $('#myModal').hide(); }); </script> ``` 以上是一个基本的封装示例，你可以根据你的实际需求进行修改和扩展。希望对你有帮助！如有更多问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值