JavaScript-如何创建级联模态对话框

需求定制 需求定制 主题:1050 回复:2283

JavaScript-如何创建级联模态对话框

甜柠檬 发布于 2017-03-01 字数 165 浏览 1106 回复 3

如何创建级联模态对话框,就是对话框中 出现 对话框 层次不限制 的 工作原理

例如

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(3

甜柠檬 2017-09-01 3 楼

我自问自答给个demo吧 这个是昨天alz在群中回答mm的答案 呵呵

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>级联模态对话框工作原理</title>
<style>

mask{position:absolute;left:0px;top:0px;width:100%;height:100%;background-color:black;opacity:0.2;}

dlg1{position:absolute;left:10px;top:10px;width:500px;height:300px;border:1px solid red;background-color:#EEEEEE;}

dlg2{position:absolute;left:20px;top:20px;width:400px;height:200px;border:1px solid green;background-color:#EEEEEE;}

dlg3{position:absolute;left:30px;top:30px;width:300px;height:100px;border:1px solid blue;background-color:#EEEEEE;}

</style>
<script type="text/javascript">
<!--
/**

  • 目的:介绍级联模态对话框基本工作原理
  • 日期:2012-8-6
    */
    function $(id){
    return document.getElementById(id);
    }
    function DlgManager(){
    this.zIndex = 1;
    this.stack = [];
    this.mask = null;
    this.init = function(mask){
    this.mask = mask;
    };
    this.showDlg = function(id){
    this.mask.style.display = "";
    this.mask.style.zIndex = this.zIndex++;
    var dlg = $(id);
    dlg.style.display = "";
    dlg.style.zIndex = this.zIndex++;
    this.stack.push(dlg);
    };
    this.hide = function(){
    var dlg = this.stack.pop();
    dlg.style.display = "none";
    if(this.stack.length == 0){
    this.mask.style.display = "none";
    }else{
    dlg = this.stack[this.stack.length - 1];
    this.mask.style.zIndex = parseInt(dlg.style.zIndex, 10) - 1;
    }
    };
    }
    var mgr = new DlgManager();
    window.onload = function(){
    mgr.init($("mask"));
    };
    //-->
    </script>
    </head>
    <body>
    <input type="button" value="open dlg1" onclick="mgr.showDlg('dlg1')" />
    <div id="mask" style="display:none;"></div>
    <div id="dlg1" style="display:none;">
    <input type="button" value="open dlg2" onclick="mgr.showDlg('dlg2')" />
    <input type="button" value="close" onclick="mgr.hide()" />
    </div>
    <div id="dlg2" style="display:none;">
    <input type="button" value="open dlg3" onclick="mgr.showDlg('dlg3')" />
    <input type="button" value="close" onclick="mgr.hide()" />
    </div>
    <div id="dlg3" style="display:none;">
    <input type="button" value="close" onclick="mgr.hide()" />
    </div>
    </body>
    </html>
泛泛之交 2017-05-16 2 楼

1.首先很多的js插件就可以实现,比如jquery.jmpopups-0.5.1.js,具体的实现就不写了,例子网上到处都是
2.自己创建DIV的图层,然后用z-index来控制浮层

清晨说ぺ晚安 2017-04-24 1 楼

很多jquery的弹出层插件都可以级联嵌套显示的,这里推荐一个我在用的,比较好用。

http://www.kudystudio.com/jbox/jbox-demo.html