JavaScript定制弹出对话框（详解）

前言

    前不久，笔者碰到了需要根据需求来定制对话框的问题，比如要能改变对话框的大小，按钮上的文字要能改等等。笔者查了一些网上的资料，结合这些资料和一些自己的想法，终于实现了，现在把这种方法拿出来分享给大家，希望对大家有帮助。头一回写博，这其中如果有什么不妥和错误的地方，还请不吝赐教！

具体实现

    此方法采用window.showModalDialog()方法实现（涉及到模态窗口和非模态窗口）

    参考资料：http://www.cnblogs.com/tohen/archive/2007/05/29/764189.html

                       http://www.cnsdn.com.cn/blog/article.asp?id=2007

    涉及到的js 功能函数：

    1----SetDefaultButton()：设置默认焦点按钮

    2----Action_OK()：点击OK按钮事件

    3----Action_Cancel()：点击Cancel按钮事件

    4----ShowModalDialog()：弹出对话框函数

  ModalDialog.js代码如下——

function  SetDefaultButton(defaultButton)  ... {
          // Set the focus on the Cancel button
    document.getElementById(defaultButton).focus();
}
         // The actions when click OK button
function  Action_OK()  ... {
    window.close();
    window.returnValue = 1;
}
         // The actions when click Cancel button
function  Action_Cancel()  ... {
    window.returnValue = 0;
    window.close();
}

function  ShowModalDialog(args, width, height)  ... {

            //有些浏览器不支持这种方法来弹出窗口，这里先做一下检验，不行的就用window.open方法弹出
    if (window.showModalDialog) ...{
        var result = window.showModalDialog("page.html", args, "dialogWidth=" + width + "px;dialogHeight=" + height + "px;status:no");

           //返回一个值，用于调用处判断用户的选择结果
        return result;
    } else ...{
        window.open("page.html", "newwindow", "height=" + width + ",dialogHeight=" + height + ", top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
    }
}

    上面的代码还存在一个缺陷，就是当浏览器不支持  window.showModalDialog 时，用window.open方法打开的对话框是非模态的，怎么样改为模态的，这点笔者还没有去研究，如果哪位高手有方法，还请赐教！

函数调用：

     下面给出ModalDialog.htm源代码——

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
     < head >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=GB18030" >
         < title > 定制对话框实验 </ title >
         < script  type ="text/javascript"  src ="ModalDialog.js" ></ script >
         < script > ...
             var args = new Array("提示內容","是","否");
             var rt = ShowModalDialog(args,410,130);
             if(rt == 1)
                alert("你选择了 是 按钮，返回值为：" + rt);
             else if(rt == 0)
                alert("你选择了 否 按钮，返回值为：" + rt);
             else
                alert("你选择了直接关闭窗口，返回值为：" + rt);
             //只有当返回值为1时才做相应处理，其他情况则表示用户选择了否，不想做处理
         </ script >
     </ head >
     < body >
     </ body >
</ html >

     我们知道， window.showModalDialog(sURL [, vArguments] [, sFeatures])方法种，sURL是用来指示对话框显示内容的参数，这是展示的主体，所以我们还要将这个主体“画”出来，可以用一个html文件来实现，取名为page.html，代码给出如下——  

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
     < head >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=GB18030" >
         < title > 对话框 </ title >
         < script  type ="text/javascript"  src  = "ModalDialog.js" ></ script >
     </ head >
     < body  onload ='SetDefaultButton("btnConfOK")' >
         < table  width ="100%"  height ="100%" >
             < tr  height ="70" >
                 < td  width ="30%"  align ="center"  valign ="middle" >
                     < img  src ="ico/question.ico" >
                 </ td >
                 < td  width ="70%" >
                     < script > ...
                    document.write((window.dialogArguments)[0])                      
                     </ script >
                 </ td >

             </ tr >
             < tr  height ="30" >
                 < td  align ="right"  valign ="bottom"  colspan ="2" >
                     < button  id ="btnConfOK"  type ="button"
                        style ="height:30px; width:80px"  tabindex ="1"   onclick ="Action_OK()" >
                         < script > ...
                        document.write((window.dialogArguments)[1])
                         </ script >
                     </ button >
                     &nbsp;
                     < button  id ="btnConfCancel"  type ="button"
                        style ="height:30px; width:80px"  tabindex ="2"   onclick ="Action_Cancel()" >
                         < script > ...
                        document.write((window.dialogArguments)[2])
                         </ script >
                     </ button >
                 </ td >

             </ tr >
         </ table >

     </ body >
</ html >

      上面用到了一个图标"ico/question.ico"，是一个疑问号图标，windows系统中都可以找到的。

       提示的内容和按钮上的文字则都用javascript来获取，其值来自在调用ShowModalDialog方法是传入的一个数组args，用这种方法就能根据需要来改变界面上的显示了。其余的应该不用讲解也能看懂了哈……

       上面的代码是可以直接运行的，建立一个web工程，将上面三个文件拷贝到工程根目录下，并将图标文件拷贝到根目录下的ico目录下。发布到web服务器后，运行ModalDialog.htm就可以看到效果啦~！