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 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
实现获取http内容的php函数分享
2014/02/16 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
python实现自动发送邮件
2018/06/20 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
python在地图上画比例的实例详解
2020/11/13 Python
印尼购物网站:iLOTTE
2019/10/16 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
2014新课程改革心得体会
2014/03/10 职场文书
年会搞笑主持词
2014/03/27 职场文书
高中学生期末评语
2014/04/25 职场文书
小学生交通安全寄语
2015/02/27 职场文书
上班迟到检讨书
2015/05/06 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
学习心理学心得体会
2016/01/22 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript