posts - 7,  comments - 58,  trackbacks - 0

  由于本人认为用 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>

运行test.html例子可以看到相应的效果



posted on 2008-05-01 15:54 Sonny Li 阅读(1751) 评论(2)  编辑  收藏 所属分类: javascript编程语言

FeedBack:
# re: 用模式对话框实现“消息提示框”和“操作提示框”
2008-05-02 13:35 | Happy漫步者
这个也不错啊 很实用~  回复  更多评论
  
# re: 用模式对话框实现“消息提示框”和“操作提示框”
2008-05-05 10:56 | 王战锋
呵呵,一个非常好的应用。。。。。。  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 
<2008年5月>
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567

常用链接

留言簿(3)

随笔分类

随笔档案

文章分类

相册

收藏夹

博客好友

搜索

  •  

最新评论

阅读排行榜

评论排行榜