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重要知识更新
Jul 08 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
vue实现图片裁剪后上传
Dec 16 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
Web程序工作原理详解
2014/12/25 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
Python中的面向接口编程示例详解
2021/01/17 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
营销人才自我鉴定范文
2013/12/25 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
运动会解说词100字
2014/01/31 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
党员活动日总结
2014/05/05 职场文书
离婚协议书范本样本
2014/08/19 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js