bootstrap多个模态框嵌套显示,造成的遮罩颜色加深和页面滚动条问题
来源:互联网 发布:淘宝退款速度评价 编辑:程序博客网 时间:2024/05/29 16:50
网上找到了csdn 一位大神的解决方案:
http://blog.csdn.net/k358971707/article/details/71908862
大神的方案有一点小问题,就是当多个模态框都有滚动条的时候,隐藏前一个模态框后,当前模态框的滚动条不出现了。
我在大神基础上改进了,现在记录,贴上代码
修改代码:
//判断当前页面所有的模态框都已经隐藏了之后body移除.modal-open,即body出现滚动条。 if ($('.modal.fade.in').length === 0){ that.$body.removeClass('modal-open'); that.$body.css({"padding":"8px 20px"}); }else{ that.$body.addClass('modal-open'); that.$body.css({"padding":"8px 20px"}); }
整体代码:
<body> <div id="container"> <span >这是一个很长的div,使页面出现滚动条。</span> <h2>使用Bootstrap创建多模态框</h2> <p style="height:900px">你可以在这添加一些文本。</p> <div id="example1" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>这是第一个模态框</h3> </div> <div class="modal-body"> <h4>第一个模态框中的文本</h4> <p style="height:900px">你可以在这添加一些文本。</p> </div> <div class="modal-footer"> <a data-toggle="modal" href="#example2" class="btn btn-primary btn-large">弹出第二个模态框</a> <a href="#" class="btn" data-dismiss="modal">关闭</a> </div> </div> </div> </div> <div id="example2" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>这是第二个模态框</h3> </div> <div class="modal-body"> <h4>第二个模态框中的文本</h4> <p style="height:900px">你可以在这添加一些文本。</p> </div> <div class="modal-footer"> <a data-toggle="modal" href="#example3" class="btn btn-primary btn-large">弹出第三个模态框</a> <a href="#" class="btn" data-dismiss="modal">关闭</a> </div> </div> </div> </div> <div id="example3" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>这是第三个模态框</h3> </div> <div class="modal-body"> <h4>第三个模态框中的文本</h4> <p style="height:900px">你可以在这添加一些文本。</p> </div> <div class="modal-footer"> <!--<a data-toggle="modal" href="#example2" class="btn btn-primary btn-large">发动演示模态框</a>--> <a href="#" class="btn" data-dismiss="modal">关闭</a> </div> </div> </div> </div> <p><a data-toggle="modal" href="#example1" class="btn btn-primary btn-large">发动演示模态框</a></p> </div> <script src="jquery.js"></script> <script src="bootstrap.js"></script> <script> $(document).on('show.bs.modal', '.modal', function(event) { $(this).appendTo($('body')); }).on('shown.bs.modal', '.modal.in', function(event) { setModalsAndBackdropsOrder(); }).on('hidden.bs.modal', '.modal', function(event) { setModalsAndBackdropsOrder(); }); $.fn.modal.Constructor.prototype.hideModal = function () { var that = this; this.$element.hide(); this.backdrop(function () { //判断当前页面所有的模态框都已经隐藏了之后body移除.modal-open,即body出现滚动条。 if ($('.modal.fade.in').length === 0){ that.$body.removeClass('modal-open'); that.$body.css({"padding":"8px 20px"}); }else{ that.$body.addClass('modal-open'); that.$body.css({"padding":"8px 20px"}); } //that.resetAdjustments(); that.resetScrollbar(); that.$element.trigger('hidden.bs.modal'); }); }; function setModalsAndBackdropsOrder() { var modalZIndex = 1040; $('.modal.in').each(function(index) { var $modal = $(this); modalZIndex++; $modal.css('zIndex', modalZIndex); $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1); }); $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden'); } </script></body>
阅读全文
0 0
- bootstrap多个模态框嵌套显示,造成的遮罩颜色加深和页面滚动条问题
- EXT TABPANEL嵌套的布局和滚动条问题
- 没有滚动条,页面内容显示不全问题的解决方法
- 刷新页面滚动条显示问题
- 前端Html页面滚动条显示问题
- intellij idea 自定义选中字符的背景颜色和右侧滚动条上显示的颜色
- 父页面带滚动条时,iframe的bootstrap模态框定位问题
- Bootstrap modal 多弹窗之叠加引起的滚动条,遮罩阴影问题
- 页面滚动条颜色样式
- Bootstrap navbar 背景颜色、背景图和字体颜色修改,颜色修改不显示的问题
- 下拉列表和滚动条等无法显示的问题
- iframe的滚动条问题:显示/隐藏滚动条
- iframe的滚动条问题:显示/隐藏滚动条
- iframe的滚动条问题:显示/隐藏滚动条
- 使用bootstrap引起IE浏览器滚动条变为透明的并且不占用页面宽度的问题以及解决办法
- TWebBrowser滚动条的显示问题探讨。
- DataGrid的滚动条不显示问题
- 解决iframe嵌套frameset出现滚动条失效的问题
- 第三周项目一
- VS 如何设置编译后的程序可以以管理员身份运行
- java进制转换
- Linux下profile和bashrc四种的区别
- 卡特兰数(Catalan)证明及应用:12个高矮不同的人排成前后两队
- bootstrap多个模态框嵌套显示,造成的遮罩颜色加深和页面滚动条问题
- 单例模式-收集整理
- 如何免费搭建一个Https的网站
- PHP生成随机字符串
- 运算符的副作用
- 第十五周项目1 验证算法(6)归并排序
- 第十五周项目一(7)——归并排序
- 第十五周项目1-验证算法-堆排序
- linux进程间通信方式之信号处理sigaction