Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题


Posted in Javascript onFebruary 27, 2017

 上篇提到的' Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题'

我总结了下,对于modal多窗口叠加引起的遮罩,滚动条,无法弹出窗口的问题,查看源代码,我总结了一种方法可以一次性解决所有这些问题,而不影响原有modal功能,并且实现了多窗口叠加。

对于多窗口,如果我们将第二个,乃至第三个,第四个modal的根节点,移植到body下面,就不会出现了以上问题。
具体该如何操作,请看以下代码:

通常我们遇到多弹窗的问题,是出现在modal套modal中,也就是:

<div class='fade modal' id='modal_demo' style='display:none'>
     <div class='modal-dialog modal-max-lg'>
     <div class='modal-content'>
      <div class='modal-header'>
      <button class='close' id='feature-mapping-dialog-form_close_button' type='button'>x</button>
      <h4 class='modal-title'>Map Features</h4>
      </div>
      <div class='modal-body'>
      <div>
       <table>
        <tr>
         .....
         <td>
         <div class='fade modal' id='modal_demo' style='display:none'>
     <div class='modal-dialog modal-max-lg'>
     <div class='modal-content'>
      <div class='modal-header'>
       <button class='close' id='feature-mapping-dialog-form_close_button' type='button'>x</button>
      <h4 class='modal-title'>Map Features</h4>
      </div>
      <div class='modal-body'> 
      ...

第二个窗口是在click事件中,弹出,在第一个modal层上出现。这里,我们可以在common.js中写如下代码:

$('#click_demo').live('click', function(e) {
 $("#body").append("<div class='fade modal' id='model_dialog'/>");
 $("#body").children().last().append($(this).next().html());
 $("#body").children().last().modal();
});
$("#click_demo").live('hidden.bs.modal',function(){
 $("#body").children().last().remove();
})

click代码:

<div id="click_demo",class="idel",style="display:inline" >
 <img alt='click details' src="/icons/demo.png" title="click to details">
<div class='fade modal' id='modal_demo' style='display:none'>
     <div class='modal-dialog modal-max-lg'>
     <div class='modal-content'>
      <div class='modal-header'>
      <button class='close' id='feature-mapping-dialog-form_close_button' type='button'>x</button>

以上所述是小编给大家介绍的Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
Vue实例简单方法介绍
Jan 20 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
微信小程序实现弹出菜单动画
Jun 21 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
node.js入门教程之querystring模块的使用方法
Feb 27 #Javascript
JavaScript中数组Array方法详解
Feb 27 #Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 #Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 #Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 #Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 #Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 #Javascript
You might like
php比较两个绝对时间的大小
2014/01/31 PHP
Laravel框架表单验证详解
2014/09/04 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
python图像处理之镜像实现方法
2015/05/30 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
高中地理教学反思
2014/01/29 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
企业文化标语大全
2014/06/10 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
会议主持词开场白
2015/05/28 职场文书
休假证明书
2015/06/24 职场文书