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 Firefox与IE 替换节点的方法
Feb 24 Javascript
围观tangram js库
Dec 28 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
JS功能代码集锦
May 04 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
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生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
js仿京东放大镜效果
2020/08/09 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
Python 如何提高元组的可读性
2019/08/26 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
护士毕业实习感言
2014/03/05 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
生日寄语大全
2014/04/08 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
创业计划书之家教托管
2019/09/25 职场文书