bootstrap 模态窗口 多重/多个弹窗滚动条补丁
由于bootstrap的模态窗口默认不支持多次弹出, 在关闭的时候会有滚动条消失的问题. 经过观察和查看源码, 发现在开启和关闭的时候会在body上增加/减少一个"modal-open"的class,所以只要在关闭的时候判断一下是否还有没关闭的窗口, 如果还有未关闭的, 则重新给body加上"modal-open"即可.
以下是代码:
//bootstrap 多重modal弹窗滚动条补丁.
$('body').on('hide.bs.modal', 'div.modal[role]', function (e) {
var len = $('div.modal[role]').length;
if (len > 1) {
setTimeout(function () {
$("body").addClass("modal-open");
}, 500);
}
});
这里处理的有点麻烦, 做了个延迟500ms, 是由于"hide.bs.modal"的触发时机过早, 模态窗体自带的"hidden.bs.modal"无法像上面代码那样触发,(麻烦哪位路过的大神给指个路.). 在事件触发之后才执行了removeClass("modal-open") . 关于这个, 大家可以去看下bootstrap.js里面的源码.搜索 "modal-open"即可找到相关代码.
如果您觉得这篇博客对您产生了一些必要的帮助, 欢迎您对我意思意思, 我将会觉得您非常够意思!

bootstrap 模态窗口 多重/多个弹窗滚动条补丁的更多相关文章
- Bootstrap 模态窗口源码分析
前言: bootstrap的 js插件的源码写的非常好,也算是编写jquery插件的模范写法,本来还想大篇详细的分析一下呢,唉,没时间啊,很早之前看过的源码了,现在贴在了博客上, 300来行的代码,其 ...
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
- 基于bootstrap模态框的alert弹窗
完成的效果如下: html代码: <!-- 弹出框 --> <div class="modal fade" id="alert_like" t ...
- 使用jQuery和Bootstrap实现多层、自适应模态窗口
本篇实践一个多层模态窗口,而且是自适应的. 点击页面上的一个按钮,弹出第一层自适应模态窗口. 在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即 ...
- 多个按钮触发同一个Bootstrap自适应模态窗口
在项目中可能会面对这样的一个场景: 界面上有多个按钮,我们希望点击这些按钮弹出同一个模态窗口,但希望模态窗口的内容是动态生成的,即,点击每个按钮弹出的模态窗口内容不同. 通常情况下,一个按钮对应一个模 ...
- Remodal – 支持 Hash 追踪的响应式模态窗口
Remodal 是一个扁平化,响应式,轻量而且容易定制的模态窗口插件,支持使用声明状态和 Hash 跟踪.您可以轻松地定义为模态弹窗定义背景景容器(如模糊效果).支持所有现代的浏览器. 您可能感兴趣的 ...
- 15款最好的 jQuery Modal(模态窗口)插件
jQuery 模态窗口插件帮助网站开发人员显示网页中的特定内容,让用户聚焦到这个地方.模态窗口是嵌入到当前网页中,不用重定向到新网页的弹出窗口.这种技术可以用在图像画廊,电子商务网站,登陆框,电子邮件 ...
- Bootstrap模态弹出框
前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
- 第二百四十三节,Bootstrap模态框插件
Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框 ...
随机推荐
- 逐层解析请求json参数字符串【我】
import net.sf.json.JSONObject; 逐层解析请求json参数字符串: InputStream inStream =null; BufferedReader br =null; ...
- springboot启动提示连接mysql报错:java.sql.SQLNonTransientConnectionException: CLIENT_PLUGIN_AUTH is required
如题,启动springboot报错: -- :: --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized wi ...
- Spring cloud微服务安全实战-3-6API安全机制之数据校验
校验:非空.唯一性等校验 密码的加密:密码加密来存储. 如何做https的访问 校验 一个层面是接口层面,另外一个层面是数据库层面. Springboot给我们提供了简单的封装 校验的包里面还有其他的 ...
- "AttributeError: /lib64/libcrypto.so.1.1: undefined symbol: EVP_CIPHER_CTX_cleanup"
以前在openssl,有 EVP_CIPHER_CTX_cleanup函数. 1.1.0版本中 替换成为EVP_CIPHER_CTX_reset 解决办法: 找到报错的文件vim /usr/local ...
- mysql登录指令
mysql -h 192.168.1.124 -u root -p -h后加mysql的ip,-u加用户名,-p会弹出输入密码
- 123457123456#0#-----com.cym.shuXue02--前拼后广--开心学数学
com.cym.shuXue02--前拼后广--开心学数学
- 基于Java API for WebSocket (JSR-356)的标准websocket客户端
maven依赖 springboot <dependency> <groupId>org.springframework.boot</groupId> <ar ...
- html如何修改hr水平直线的粗细
hr是常见的超文本标签,是一条水平直线,要设置该直线变粗一些.可以先把hr本身的border隐藏掉,然后设置border-top-width,也就是只留上边框,如图:hr的默认高度height是0,所 ...
- 【Leetcode_easy】874. Walking Robot Simulation
problem 874. Walking Robot Simulation solution1: 思路:1)如何表示移动的方向以及移动的位置坐标; 2)障碍物坐标如何检查;3)求解的是最大距离; cl ...
- AWS 基础设施即代码(五)
基础设施即代码 概述 手动配置的挑战:可能因为人为错误导致缺乏可靠性,环境无法完全再现,同时需要额外文档 基础设施即代码,是软件开发中用于创建可重用.可维护.可扩展及可测试基础设施的技术.实践和工具, ...