用模式对话框实现“消息提示框”和“操作提示框”

maomaozgc

浏览: 337335 次
性别:
来自: 北京

最近访客更多访客>>

morelily

isjian

chenweinjupt

aje

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript_css_html

HTML Google

用模式对话框实现“消息提示框”和“操作提示框”

用 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="#" onclick="showMsg({msg:'1秒钟后会自动关闭的提示信息框', time:1000})">会自动关闭的提示信息框</a>
     <br/>
     <a href="#" onclick="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" onclick="setState()">确定</a>
      <a href="#" id="cal" onclick="setState()">取消</a>
     </div>
   </center>
</p>
</body>
</html>

from:google.com

分享到：

访问weblogic异常(1) | 禁用页面缓存的五种方法

2010-01-30 11:05
浏览 2209
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论