Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案


Posted in Javascript onFebruary 23, 2017

最近一直在使用Bootstrap,遇到了很多问题,通过google也明白了很多,学习了很多。针对‘Bootstrap modal 多弹窗之叠加显示不出弹窗问题'说一下自己的解决办法。

当然还是官方提出的‘最好不要多个modal叠加很容易出现很难解决的前端组件问题'

示例代码:

<div class='bs-example-modal-lg fade modal' data='0' id='feature-mapping-dialog-form' 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='bs-example-modal-lg fade modal' id='feature-mapping-dialog-form' 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'> 
      ...

script:

$( "#feature-mapping-dialog-form" ).bind('show.bs.modal',function(){
  if($( "#feature-mapping-dialog-form" ).attr("data")=="1"){
  $("#ajax_search_done").val("NO");
  $("#edit_path_lba_tree").jstree("deselect_all");
  $("#edit_path_lba_tree").jstree("close_all");
 ...
  $( "#feature-mapping-dialog-form" ).attr("data","0");  
 })
$( "#feature-mapping-dialog-form" ).bind('hide.bs.modal',function(){
  if($( "#feature-mapping-dialog-form" ).attr("data")=="1"){
  $("#edit_path_lba_tree").jstree("deselect_all");
  $("#edit_path_lba_tree").jstree("close_all");
  ... 
  $( "#feature-mapping-dialog-form" ).attr("data","0"); 
 })

效果是在第一个弹框的基础上弹出第二个modal

这里很多人会问,我的没问题啊,直接显示了,请看代码,如果你的modal的div是直接在body下面的,并且modal没有其他额外的action监听,比如'show.bs.modal','hide.bs.modal'等监听事件,简单弹出显示文本内容,不会有什么问题,如果有以上的逻辑代码,那么modal弹窗就会出问题,也就是显示不出来第二个modal.

针对这个问题,我的解决办法是:

<div class='bs-example-modal-lg fade modal' data='0' id='feature-mapping-dialog-form' style='display:none'>

增加data属性区分modal

当调用xxxx.modal()之前,设置为”1”,进入监听代码

判断是否为第一个modal访问,处理完逻辑,重新设置为0.

以上所述是小编给大家介绍的Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 自动转到命名锚记
Jan 10 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 #Javascript
jquery实现焦点轮播效果
Feb 23 #Javascript
SVG描边动画
Feb 23 #Javascript
Angular JS 生成动态二维码的方法
Feb 23 #Javascript
js实现楼层导航功能
Feb 23 #Javascript
jQuery点击头像上传并预览图片
Feb 23 #Javascript
jQuery事件与动画基础详解
Feb 23 #Javascript
You might like
使用字符串函数输出整数化的PHP版本号
2006/10/09 PHP
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
javascript标签在页面中的位置探讨
2013/04/11 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
js微信分享实现代码
2020/10/11 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
捷克玩具商店:Bambule
2019/02/23 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
求职信的七个关键技巧
2014/02/05 职场文书
大学生英语演讲稿
2014/04/24 职场文书
班级口号大全
2014/06/09 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
高一军训口号
2015/12/25 职场文书
php引用传递
2021/04/01 PHP
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记