bootstrap添加多个模态对话框支持

(2015-03-04 21:05:35)

标签:

房产

 

因为项目需要,在页面交互上要弹出多个dialog窗口,而bootstrap的modal支持弹出dialog窗口,但是如果在此基础上,会出现遮罩层越来越多,背景越来越黑的情况。

代码具体如下:
(function(){
modal = {};
modal.openDialog = function(url, title, width, height, id){};
modal.closeDialog = function(id){};
window.modal = modal;
})();
 
openDialog函数中传入了id,即为即将生成的dialog的div的id,url为dialog中iframe的src,id也将写在modal函数的参数option中。
 
调用多个dialog时,需要传入不同的id;
源代码中
backdrop: function (callback) {
        var that = this
          , animate = this.$element.hasClass('fade') ? 'fade' : ''
 
        if (this.isShown && this.options.backdrop) {
          var doAnimate = $.support.transition && animate
 
          this.$backdrop = $('

 

')

            .appendTo(document.body)
 
          this.$backdrop.click(
            this.options.backdrop == 'static' ?
              $.proxy(this.$element[0].focus, this.$element[0])
            : $.proxy(this.hide, this)
          )
 
          if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
 
          this.$backdrop.addClass('in')
 
          if (!callback) return
 
          doAnimate ?
            this.$backdrop.one($.support.transition.end, callback) :
            callback()
 
        } else if (!this.isShown && this.$backdrop) {
          this.$backdrop.removeClass('in')
 
          $.support.transition&& this.$element.hasClass('fade')?
            this.$backdrop.one($.support.transition.end, callback) :
            callback()
 
        } else if (callback) {
          callback()
        }
      }
函数中 this.$backdrop = $('

 

').appendTo(document.body)即为添加遮罩层。

 
遮罩层实现为在body后添加,并设置该div的z-Index为99999;
 
我们接下来的实现也是用z-Index,考虑到一层一层网上叠加z-Index,遮罩层只一个即可,而不同的dialog只需比遮罩层的z-Index高即可。
那就仅第一个dialog打开的时候添加遮罩层,其余时候对遮罩层的style中z-Index进行增大即可。
 
在Modal类代码中添加类对象,Modal.ids = [];
 
在进行添加遮罩层时,即var doAnimate = $.support.transition && animate 这行代码后对id进行push,再进行判断dialog个数
dialogId = option.id;
Modal.ids.push(id);
if(Modal.ids.length==1){
this.$backdrop = $('

 

').appendTo(document.body);

$("#"+id).attr("style","z-Index:100000!important");
}else{
var perviouszIndex = $(".modal-backdrop").css("z-Index");
this.$backdrop = $(".modal-backdrop").attr("style","z-Index:"+(perviouszIndex+2)+"!important");
$("#"+id).attr("style","z-Index:"+(perviouszIndex+3)+"!important");
}
而当关闭时,需要对遮罩层的z-Index重新计算,dialog被隐藏了就不需要了,因为再次打开时会再次计算几次
关闭时,对遮罩层的操作在
removeBackdrop: function () {
        this.$backdrop && this.$backdrop.remove()
        this.$backdrop = null
}函数中,改写该函数即可
removeBackdrop: function () {
if(Modal.ids==1)
        this.$backdrop && this.$backdrop.remove();
        this.$backdrop = null;
Modal.ids.shift();
}else{
this.$backdrop.attr("style","z-Index:"+(perviouszIndex-2)+"!important");
Modal.ids.shift();
}
 
以上
 
 
 

bootstrap添加多个模态对话框支持的更多相关文章

  1. 添加一个非模态对话框在revit中

    RequestHandler handler = new RequestHandler(); ExternalEvent exEvent = ExternalEvent.Create(handler) ...

  2. 【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束

    引言:2048小游戏的结束界面,使用纯CSS制作模态对话框,一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用,但在制作要运行在移动端的小项目时,就不能使用BootStrap,因为 ...

  3. 为Bootstrap模态对话框添加拖拽移动功能

    请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> < ...

  4. bootstrap导航条+模态对话框+分页样式

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. bootstrap表格添加按钮、模态框实现

    bootstrap表格添加按钮.模态框实现 原创 2017年07月20日 17:35:48 标签: bootstrap 1723 bootstrap表格添加按钮.模态框实现 - 需求: 需要表格后面每 ...

  6. Bootstrap 模态对话框只加载一次 remote 数据的解决办法 转载

    http://my.oschina.net/qczhang/blog/190215 摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹 ...

  7. bootstrap模态对话框

    bootstrap模态对话框 前提是引入bootstrap的css和js的东西 data-backdrop="static"代表的是点击旁边的内容,不进行关闭操作,但是esc的时候 ...

  8. jQuery练习 | 模态对话框(添加删除)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 一百二十六:CMS系统之轮播图管理页面布局和添加轮播图的模态对话框制作

    视图 @bp.route('/banners/')@login_required@permission_required(CMSPersmission.POSTER)def banners(): re ...

随机推荐

  1. ios上视频与音乐合成后出现播放兼容问题的解决方法

    近期EasyDarwin开源流媒体团队EasyVideoRecorder小组同学Carl在支持一款短视频应用上线时,遇到一个问题:我们在IOS上合成"图片+音乐"成为视频之后,在P ...

  2. BitMapFactory.decodeFile 总是返回NULL的原因之一

    之前碰到过,顺便记录下来,如果出现这种情况,首先看看是否有对这个文件的读权限.

  3. virtualBox 不能开启一个新任务的错误

    2016.06.05 这两天想在virtualbox上安装CentOS7.0玩,遇到一个问题: 不能为虚拟电脑 CentOS7 打开一个新任务. The virtual machine 'CentOS ...

  4. thrift编译java的问题-(安装thrift0.8.0成功-编译mapkeeper.java成功)

    上一次帖子说了thrift编译java出现错误,由于只用到cpp版的,就将此略过.但是老版本的ycsb不是很好用,于是决定以locall的方式编译mapkeeper供最新版ycsb使用.目前根据 ht ...

  5. jQuery ajax序列化函数

    参数序列化$.param() 举例: <!DOCTYPE html> <html> <head> <script src="https://ajax ...

  6. codeforces 652C C. Foe Pairs(尺取法+线段树查询一个区间覆盖线段)

    题目链接: C. Foe Pairs time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  7. (转)使用cygwin注意事项一

    原文出处:http://gotgit.readthedocs.io/en/latest/01-meet-git/050-install-on-windows-cygwin.html 在Windows下 ...

  8. BZOJ_4154_[Ipsc2015]Generating Synergy_KDTree

    BZOJ_4154_[Ipsc2015]Generating Synergy_KDTree Description 给定一棵以1为根的有根树,初始所有节点颜色为1,每次将距离节点a不超过l的a的子节点 ...

  9. [USACO 2008 MAR] 土地购买

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1597 [算法] 首先将所有土地按长为第一关键字 , 宽为第二关键字排序 显然 , 当 ...

  10. C++模板之typename和class关键字的区别

    我们都知道,在STL中基本上都使用了模板类的声明,即template.在模板类的声明中,我们有两种方式: template <class T> template <typename ...