用模式对话框实现“消息提示框”和“操作提示框”
用 alert()和confirm()的消息框和操作确认对话框，界面不太友好，下面介绍用模式对话框实现“消息提示 框”和“操作提示框”；用模式对话框也可以实现弹出窗口(抱括Iframe模式及DIV模式），DIV模式较麻烦些，不过，还挺实用，这里不作介绍。
1、test.html 测试页
<html>
<head>
<title>测试页面</title>
<script>
/**** 打开消息框 ***
* @param 为Object类型,原型为 {msg:"val1", time:val2},val1为要提示的消息，val2为窗口出来后延迟关闭的时间
*
*/
function showMsg(param) {
window.showModalDialog("msg.html", param, "dialogWidth:280px;dialogHeight:180px;center:yes;help:no;scroll:no;status:no;resizable:no");
}
/****操作确认窗口*****
* @param 为string类型,提示信息
* @return true为选取了“确定”铵钮，false为选取了“取消”铵钮
*/
function confirm(msg) {
return window.showModalDialog("confirm.html", msg, "dialogWidth:280px;dialogHeight:180px;center:yes;help:no;scroll:no;status:no;resizable:no");
}
function confirmDel() {
var rval = confirm("确定删除此用户吗？");
if(rval) {
showMsg({msg:"你点击了确定铵钮", time:1200});
}else{
showMsg({msg:"你点击了取消铵钮", time:1200});
}
}
</script>
</head>
<body>
<center>
<a href="#" οnclick="showMsg({msg:'1秒钟后会自动关闭的提示信息框', time:1000})">会自动关闭的提示信息框</a>
<br/>
<a href="#" οnclick="confirmDel();">操作确认对话框</a>
</center>
</body>
</html>
2、msg.html 消息框通用模板
<html>
<head>
<title>提示对话框</title>
<script>
var obj = window.dialogArguments; //传过来的模式对话框窗口参数
/****在obj.time秒后关闭窗****/
window.setTimeout(function() {
window.close();
}, obj.time);
</script>
</head>
<body>
<p style="margin-top:36px">
<center>
<script>
document.write(obj.msg); //打印信息
</script>
</center>
</p>
</body>
</html>
3、confirm.html
<html>
<head>
<title>操作确认对话框</title>
<script>
function setState() {
returnValue = event.srcElement.id == "ok"? true: false;
window.close();
}
</script>
</head>
<body>
<p style="margin-top:26px">
<center>
<script>
var msg = window.dialogArguments? window.dialogArguments: "";
document.write(msg);
</script>
<br/>
<div style="margin-top:20px">
<a href="#" id="ok" οnclick="setState()">确定</a>
<a href="#" id="cal" οnclick="setState()">取消</a>
</div>
</center>
</p>
</body>
</html>
from:google.com
用 alert()和confirm()的消息框和操作确认对话框，界面不太友好，下面介绍用模式对话框实现“消息提示 框”和“操作提示框”；用模式对话框也可以实现弹出窗口(抱括Iframe模式及DIV模式），DIV模式较麻烦些，不过，还挺实用，这里不作介绍。
1、test.html 测试页
<html>
<head>
<title>测试页面</title>
<script>
/**** 打开消息框 ***
* @param 为Object类型,原型为 {msg:"val1", time:val2},val1为要提示的消息，val2为窗口出来后延迟关闭的时间
*
*/
function showMsg(param) {
window.showModalDialog("msg.html", param, "dialogWidth:280px;dialogHeight:180px;center:yes;help:no;scroll:no;status:no;resizable:no");
}
/****操作确认窗口*****
* @param 为string类型,提示信息
* @return true为选取了“确定”铵钮，false为选取了“取消”铵钮
*/
function confirm(msg) {
return window.showModalDialog("confirm.html", msg, "dialogWidth:280px;dialogHeight:180px;center:yes;help:no;scroll:no;status:no;resizable:no");
}
function confirmDel() {
var rval = confirm("确定删除此用户吗？");
if(rval) {
showMsg({msg:"你点击了确定铵钮", time:1200});
}else{
showMsg({msg:"你点击了取消铵钮", time:1200});
}
}
</script>
</head>
<body>
<center>
<a href="#" οnclick="showMsg({msg:'1秒钟后会自动关闭的提示信息框', time:1000})">会自动关闭的提示信息框</a>
<br/>
<a href="#" οnclick="confirmDel();">操作确认对话框</a>
</center>
</body>
</html>
2、msg.html 消息框通用模板
<html>
<head>
<title>提示对话框</title>
<script>
var obj = window.dialogArguments; //传过来的模式对话框窗口参数
/****在obj.time秒后关闭窗****/
window.setTimeout(function() {
window.close();
}, obj.time);
</script>
</head>
<body>
<p style="margin-top:36px">
<center>
<script>
document.write(obj.msg); //打印信息
</script>
</center>
</p>
</body>
</html>
3、confirm.html
<html>
<head>
<title>操作确认对话框</title>
<script>
function setState() {
returnValue = event.srcElement.id == "ok"? true: false;
window.close();
}
</script>
</head>
<body>
<p style="margin-top:26px">
<center>
<script>
var msg = window.dialogArguments? window.dialogArguments: "";
document.write(msg);
</script>
<br/>
<div style="margin-top:20px">
<a href="#" id="ok" οnclick="setState()">确定</a>
<a href="#" id="cal" οnclick="setState()">取消</a>
</div>
</center>
</p>
</body>
</html>
from:google.com
1308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
