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 相关文章推荐
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
小程序分享链接onShareAppMessage的具体用法
May 22 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
Javascript数组及类数组相关原理详解
Oct 29 Javascript
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
自己前几天写的无限分类类
2007/02/14 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
简单谈谈json跨域
2016/03/13 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
Python线程的两种编程方式
2015/04/14 Python
Python工程师面试必备25条知识点
2018/01/17 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
应届生如何写自荐信
2014/01/05 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
台风停课通知
2015/04/24 职场文书
工会文体活动总结
2015/05/07 职场文书
《日月潭》教学反思
2016/02/20 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang