您的位置：首页 > Web前端 > JavaScript

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

2008-01-13 02:47 295 查看

前言

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

具体实现

    此方法采用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>

<title>定制对话框实验</title>

<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>

</head>

</td>

<script>...

document.write((window.dialogArguments)[0])

</script>

</td>

</tr>

<button id="btnConfOK" type="button"

style="height:30px; width:80px" tabindex="1" onclick="Action_OK()">

<script>...

document.write((window.dialogArguments)[1])

</script>

</button>

<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就可以看到效果啦~！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript button action function html 浏览器

相关文章推荐

新的分享

章节导航