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 相关文章推荐
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
vue 二维码长按保存和复制内容操作
Sep 22 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开发GUI
2006/10/09 PHP
给php新手谈谈我的学习心得
2007/02/25 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
Python中的闭包详细介绍和实例
2014/11/21 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
小学英语教学反思范文
2016/02/15 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
php访问对象中的成员的实例方法
2021/11/17 PHP
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python