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的.animate()函数在IE6下的问题
Dec 03 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
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 程序员应该使用的10个组件
2009/10/31 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
怎么清空javascript数组
2013/05/11 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
Python与Redis的连接教程
2015/04/22 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
料理师求职信
2014/01/30 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
迎新晚会策划方案
2014/06/13 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
Mybatis是这样防止sql注入的
2021/12/06 Java/Android