跨浏览器仿模式对话框的实现-技术开发专区

跨浏览器仿模式对话框的实现

作者：雪域刀客编辑： IT168 2007-05-14 11:23

[IT168 技术文档]模式对话框，可以很方便地在网页间传递数据，并且可以让用户进行线性操作，IE上的showModalDialog效果不错，但可惜其他浏览器又不支持，况且IE也远离了95%的市场占有率。网上有很多仿模式窗体，多数采用iframe技术，有的做得非常绚丽，可是我费了很大的劲却没有找到一个适合我需要的，有的不能随意弹出多级对话框，有的不能很好地传递参数，iframe模式的对话框不能打开比主窗体大的对话框，更有甚者，有的在对话框中只能使用静态网页（比如在话框中动态生成颜色列表就不能支持），当然，它们很适合一些具体的应用，比如有的用于展示图片就很适合。但模式对话框的核心还是实现线性操作、传递参数、界面操作的模块化。无赖之下，只有自己实现了一个，只有几十行代码，自认为比较精彩，可以非常容易地传递任何参数，可以轻易的打开多级对话框，在我的系统里使用良好。
所有代码如下:(另:代码演示和下载)

//*************************************************************************************
//* p2cpdlg跨浏览器仿模式窗体：                                                     ***
//* Copyright(c) 2007 www.bokehou.com 雪域刀客 chinaxiaofei.cnblogs.com             ***
//*************************************************************************************
//* 使用说明：
//* (1) 实现主窗体文档demo.html，如：
//*     <html>
//*         <head>
//*         <title>主窗体</title>
//*         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//*         <script type="text/javascript" src="p2cpdlg.js"></script>
//*         <script type="text/javascript">
//*         function dlg_open()
//*         {
//*             var arr = new Array();
//*             arr["up01"] = "111";
//*             arr["up02"] = "222";
//*             p2cpdlg.dialogOpen('demo_testdialog.html',400,300,arr,"dlg_callback()","dialog_test");
//*         }
//*         function dlg_callback()
//*         {
//*             var arr = null;
//*             arr = p2cpdlg.params_up;
//*             if(arr != null)
//*             {
//*                 window.alert("上传的参数："+arr["up01"]+","+arr["up02"]);
//*             }
//*             arr = p2cpdlg.params_down;
//*             if(arr != null)
//*             {
//*                 window.alert("下传的参数："+arr["dn01"]+","+arr["dn02"]);
//*             }
//*         }
//*         </script>
//*         </head>
//*         <body>
//*             <button onclick="dlg_open();">打开</button>
//*         </body>
//*     </html>
//* (2) 实现对话框文档demo_testdialog.html，如：
//*     <html>
//*         <head>
//*         <title>仿模式对话框</title>
//*         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//*         <script type="text/javascript">
//*         //***对话框接口*****************************
//*         function dlg_init()
//*         {
//*             var arr = window.opener.p2cpdlg.params_up;
//*             if(arr != null)
//*             {
//*                 input01.value = arr["up01"];
//*                 input02.value = arr["up02"];
//*             }
//*         }
//*         function dlg_ok()
//*         {
//*             var arr = new Array();
//*             arr["dn01"] = input01.value;
//*             arr["dn02"] = input02.value;
//*             window.opener.p2cpdlg.dialogClose(arr,true);
//*         }
//*         function dlg_cancel()
//*         {
//*             window.opener.p2cpdlg.dialogClose(null,false);
//*         }
//*         //******************************************
//*         </script>
//*         </head>
//*         <body onload="dlg_init();" onunload="dlg_cancel();">
//*             参数1:<input id="input01" type="text" value="" size="6" />
//*             参数1:<input id="input02" type="text" value="" size="6" />
//*             <button onclick="dlg_ok();">确定</button>
//*             <button onclick="dlg_cancel();">取消</button>
//*         </body>
//*      </html>
//********************************************************************************************************
var p2cpdlg = new p2cp_dialog();
function p2cp_dialog()
{
    this.params_up      = new Array();
    this.params_down    = new Array();
    this.callback       = "";
    this.win            = null;
    this.backid         = "p2cp_dialog_backid";
    //
    this.dialogInit = function()
    {
        var back = document.getElementById(this.backid);
        if(back == null)
        {
            var div = document.createElement("div");
            div.innerHTML = "<div id='"+this.backid + "' onmouseup='p2cpdlg.dialogMouseUp();return false;' style='position:absolute;z-index:10000;top:0;left:0;width:1px;height:1px;background-color:#666666;-moz-opacity:0.7;filter:alpha(opacity=70);'></div>";
            document.body.appendChild(div.firstChild);
        }
    };
    this.dialogMouseUp = function()
    {
        if(this.win != null)
        {
            if(this.win.closed == false)
            {
                if (navigator.appName == "Microsoft Internet Explorer")
                {
                    this.win.focus();
                }
                else
                {
                    this.win.open().close();
                    this.win.focus();
                }
            }
            else
            {
                this.dialogMin();
            }
        }
        else
        {
            this.dialogMin();
        }
    };
    this.dialogMin = function()
    {
        var back = document.getElementById(this.backid);
        if(back != null)
        {
            back.style.width    = "1px";
            back.style.height   = "1px";
        }
    };
    this.dialogMax = function()
    {
        var back = document.getElementById(this.backid);
        if(back != null)
        {
            var iWidth = document.body.scrollWidth;
            if(iWidth < 1000)
            {
                iWidth = 1000;
            }
            var iHeight = document.body.scrollHeight;
            if(iHeight < 1000)
            {
                iHeight = 1000;
            }
            back.style.width   = iWidth + "px";
            back.style.height  = iHeight + "px";
        }
    };
    this.dialogOpen = function(sUrl,iWidth,iHeight,arrUpParams,sCallBack,sWindowName)
    {
        this.params_up      = arrUpParams;
        this.params_down    = null;
        this.callback       = sCallBack;
        this.dialogInit();
        this.dialogMax();
        var left = (screen.availWidth-iWidth)/2;
        var top = (screen.availHeight-iHeight)/2;
        var sProps = 'menubar=0,location=0,status=no,dialog=yes,modal=yes,scrollbars=0,resizable=1,width='+ iWidth+',height='+iHeight+',left='+left+',top='+top;
        if(this.win != null)
        {
            this.win.close();
            this.win=null;
        }
        this.win = window.open(sUrl,sWindowName,sProps);
        this.win.focus();

    };
    this.dialogClose = function(arrDownParams,bOk)
    {
        this.dialogMin();
        if(this.win != null)
        {
            this.win.close();
            this.win = null;
        }
        if(bOk)
        {
            this.params_down = arrDownParams;
            eval(this.callback);
        }
    };
}

关注我们