随笔-1  评论-44  文章-3  trackbacks-0

       163在免费邮箱在界面上花费了不少工夫,除了用了ajax来提高用户体验外,另一个亮点就是他的弹出框,去年看见申楠(qq:38371354 email:amushen1@yahoo.com.cn)同志在网上发布了一个163弹出框的模拟程序,看了之后觉得很不错,不过还有些不尽人意的地方。不过由于很忙,一直没时间改进,今年有一个项目需要用到这样好的界面于是找了点空闲时间改了一下。最近有些人在向我询问相关的东西,所以特地把他发到网上来为一些需要的人提供需要
      改了程序之后,我发现这个程序并不能满足我的需要(功能上),因为这样模拟出来的弹出框不具备模态性,不能让程序停在弹出框那个地方。比如这样一段程序
      <script language="javascript">
               alert("test");
               window.open("about:blank");
      </script>
      如果是用浏览器自带的alert,在我们点确定之后才会执行window.open;而用模拟出来的,他在执行了alert的同时还会执行window.open。可是这并不是我所需要的,鉴于此,我没有用这段程序。不过在没有涉及到模态性的方面时,我们是可以用的。大家如何取舍就看自己的需求了。

<script>
function clk_yes(){
 alert("你也同意了我的观点");
}
function clk_no(){
 alert("不是你眼花了就是我眼花了!");
}

</script>
<body>
<button onClick="alert('我觉得今天天气真的很不错!')">test</button>
<button onClick="confirm('今天天气真的很好啊,难道不是么?','clk_yes','clk_no','就算是吧','乱讲')">询问框测试</button>

<p><br>
  <br>
  <br>
弹出提示的音效文件是:snd.mp3</p>
<p>如果需要可以替换成其它文件,文件名要设置成snd.mp3</p>
<p>版本1.2修改:<br>
  1、主要修改了滚屏出现的问题
</p>
<p>版本1.1修改:<br>
  1、增加了询问框的功能。<br>
  2、增加了音效功能<br>
  3、修饰界面</p>
 
<p><b>黑旋风(LCKKING)Mail:lewclear97@163.com QQ:23929003</b><br>版本1.2修改:<br>
 由于最近在做一个东西,需要对界面设计的很友好,所以借用了你的源代码,但是你的作品还有些BUG以及不足,<br>
 例如alert之后如果按tab键,焦点会回到主页面上去,这样就不安全了。声音加载的时候,页面会闪一下,<br>
 也不是很好,询问框按钮文字windows的没法改,难道自己模拟的也没法改吗?(当然,我把他改了)。<br>
 同原作一样,没考虑跨浏览器,以后有机会再改了<br>
 对了,你的函数上原来的那些注释(如:日期、作者等)写得那么多,看程序觉得不方便,就删除了,不要介意!<br>
 总之谢谢了,为了感谢网友的无私,我也把改了的代码发给大家,希望对大家有所帮助,献丑了!<br> 
  1、由于声音加载会使页面跳一下,我不太喜欢,去掉了这个功能,希望不要介意。<br>
  2、改成面向对象设计,这样更加合理一点(个人意见)<br>
  3、扩展了询问框的按钮文字参数设置<br>
  4、覆盖了系统自带的alert和confirm方法,如果大家不喜欢,把头上那2句话删除就可以了<br>
  5、支持键盘操作。</p>
<script language="javascript">
 /**
 * 功能:显示提示窗口
 * 作者:申楠 qq:38371354 email:amushen1@yahoo.com.cn http;//amushen.cnblogs.com
 * 日期:2005-10-26
 * 版本:1.1
 * 备注:版权没有,随便拷贝,如果用于商业应用请通知本人,同时保留这段注释。
 *
 */
 /**
  * 改造:黑旋风 QQ:23929003 email:lewclear97@163.com
  * 日期:2006-03-17
  * 版本:1.2
  * 说明:本人在申楠同志的《显示提示窗口》基础上所改
  * 由于最近在做一个东西,需要对界面设计的很友好,所以借用了你的源代码,但是你的作品还有些BUG以及不足,
  例如alert之后如果按tab键,焦点会回到主页面上去,这样就不安全了。声音加载的时候,页面会闪一下,
  也不是很好,询问框按钮文字windows的没法改,难道自己模拟的也没法改吗?(当然,我把他改了)。
  同原作一样,没考虑跨浏览器,以后有机会再改了
  对了,你的函数上原来的那些注释(如:日期、作者等)写得那么多,看程序觉得不方便,就删除了,不要介意!
  总之谢谢了,为了感谢网友的无私,我也把改了的代码发给大家,希望对大家有所帮助,献丑了!
  1、由于声音加载会使页面跳一下,我不太喜欢,去掉了这个功能,希望不要介意。
  2、改成面向对象设计,这样更加合理一点(个人意见)
  3、扩展了询问框的按钮文字参数设置
  4、覆盖了系统自带的alert和confirm方法,如果大家不喜欢,把头上那2句话删除就可以了
  5、支持键盘操作。
  备注:同上
  */
 
 var alternateFrame=null;//生成的iframe
 var alternateWin=null;

 window.alert=showAlert;
 window.confirm=showConfirm;
 
 /**
  * 人机交互窗口,覆盖自带的
  */
 function alternateWindow(){
  this.win=null;//生成对话框的窗口对象
  this.pBody=null;//生成的body容器对象
  this.pBg=null;
  this.type="alert";//默认的种类是alert
  this.FocusWhere="OK";//焦点在哪个按钮上
 }
 /**
  * 模仿的alert窗口
  */
 function showAlert(info){
  alternateWin=new alternateWindow();
  var pBody = alternateWin.init();  
  alternateWin.initAlertBody(pBody,info);
  alternateWin.type="alert";
 }
  /**
  * 模仿的alert窗口
  */
 function showConfirm(info,ok_func,notok_func,ok_str,not_okstr){
  alternateWin=new alternateWindow();  
  var pBody = alternateWin.init();
  alternateWin.initConfirmBody(pBody,info,ok_func,notok_func,ok_str,not_okstr);
  alternateWin.type="confirm";
 }
 /**
  * 作用:初始基本信息
  */
 alternateWindow.prototype.init=function() {
  if(alternateFrame==null){
   alternateFrame=document.createElement("<iframe allowTransparency='true' id='popframe' frameborder=0 marginheight=0 src='about:blank' marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe>")
   alternateFrame.style.position="absolute";
   document.body.appendChild(alternateFrame);
  }else{
   alternateFrame.style.visibility="visible";
  }
  alternateFrame.style.width=screen.availWidth;
  alternateFrame.style.height=screen.availHeight;
  alternateFrame.style.left=document.body.scrollLeft;
  alternateFrame.style.top=document.body.scrollTop;
  alternateFrame.name=alternateFrame.uniqueID;

  this.win=window.frames[alternateFrame.name];
  this.win.document.write("<body leftmargin=0 topmargin=0 oncontextmenu='self.event.returnValue=false'><div id=popbg></div><div id=popbody></div><div></div></body>");
  this.win.document.body.style.backgroundColor="transparent";  
  document.body.style.overflow="hidden";  
  this.pBody=this.win.document.body.children[1];
  this.pBg=this.win.document.body.children[0]; 
  this.hideAllSelect();
  this.initBg();

  return this.pBody;
 }
 
 /**
 * 作用:初始化背景层
  */
 alternateWindow.prototype.initBg=function(){
  with(this.pBg.style){
   position="absolute";   
   left="0";
   top="0";
   width="100%";
   height="100%";
   visibility="hidden";
   backgroundColor="#333333";
   filter="blendTrans(duration=1) alpha(opacity=30)";
  }  
  this.pBg.filters.blendTrans.apply();
  this.pBg.style.visibility="visible";
  this.pBg.filters.blendTrans.play();
 }
 /**
  * 作用:初始化显示层
  */
 alternateWindow.prototype.initAlertBody=function(obj,info){
  with(obj.style){
   position="absolute";
   width="400";
   height="150";
   backgroundColor="#ffffff";   
  }
  obj.style.left=window.document.body.clientWidth/2-200;
  obj.style.top=window.document.body.clientHeight/3;
  var str;
  str ="<table border=0 cellpadding=0 cellspacing=1 bgcolor=#000000 width=100% height=100%><tr height=30>";
  str+="<td align=left style='color:#000000;font-size:14px;font-weight:bold' bgcolor=#9999ff>[提示]</td></tr>";
  str+="<tr><td align=center bgcolor=#efefff style='font-size:12px;color:#000000;vertical-align: middle;'>";
  str+=info+"</td></tr><tr height=30 bgcolor=#efefef><td align=center>" +
       "<input type='button' value='确定' id='OK' tabIndex='1'" +
       " onkeydown='parent.alternateWin.onKeyDown(event,this)'"+
       " onclick='parent.alternateWin.closeWin()'  tabIndex='2' style='border:solid 1px #666666;background:#cccccc'>" +
       "</td></tr></table>";
  obj.innerHTML=str;
  this.win.document.body.all.OK.focus();
  this.FocusWhere="OK";
 }
  alternateWindow.prototype.onKeyDown=function(event,obj){

   switch(event.keyCode){
    case 9:
      event.keyCode=-1;
     if(this.type=="confirm"){
      if(this.FocusWhere=="OK"){
       this.win.document.body.all.NO.focus();
       this.FocusWhere="NO";
      }else{
       this.win.document.body.all.OK.focus();
       this.FocusWhere="OK";
      }
     }else if(this.type="alert"){
      this.win.document.body.all.OK.focus(); 
     }
    break;
    case 13:obj.click();break;
    case 27:this.closeWin();break ;    
   }

  }
 /**
  * 作用:初始化显示层 conFirm提示层
  */
 alternateWindow.prototype.initConfirmBody=function(obj,info,ok_func,notok_func,ok_str,notok_str){
  with(obj.style){
   position="absolute";
   width="400";
   height="150";
   backgroundColor="#ffffff";   
  }
  if(ok_str==null){
   ok_str="确定";
  }
  if(notok_str==null){
   notok_str="取消" 
  }
  obj.style.left=window.document.body.clientWidth/2-200;
  obj.style.top=window.document.body.clientHeight/3;
  var str;
  str="<table border=0 cellpadding=0 cellspacing=1 bgcolor=#000000 width=100% height=100%><tr height=30>";
  str+="<td align=left style='color:#000000;font-size:14px;font-weight:bold' bgcolor=#9999ff>[询问]</td></tr>";
  str+="<tr><td align=center bgcolor=#efefff style='font-size:12px;color:#000000;vertical-align: middle;'>";
  str+=info+"</td></tr><tr height=30 bgcolor=#efefef><td align=center>" +
     "<input type='button' id='OK'" +
     " onkeyup='parent.alternateWin.onKeyDown(event,this)'"+
     " onclick='parent.alternateWin.closeWin();parent."+ok_func+"();' " +
     " value='"+ok_str+"' style='border:solid 1px #666666;background:#cccccc'>"+
     "&nbsp;&nbsp;&nbsp;<input type='button' value='"+notok_str+"' id='NO'"+
     " onkeydown='parent.alternateWin.onKeyDown(event,this)'"+
     " onclick='parent.alternateWin.closeWin();" +
     " parent."+notok_func+"();' style='border:solid 1px #666666;background:#cccccc'><input type='button' style='width:0px' value=1></td></tr></table>";
  obj.innerHTML=str;
  this.win.document.body.all.OK.focus();
 }

 /**
  * 作用:关闭一切
  */
 alternateWindow.prototype.closeWin=function(){
   alternateFrame.style.visibility="hidden";    
   this.showAllSelect();
   document.body.style.overflow="auto";  
 }
 /**
   * 作用:隐藏所有的select
   */
 alternateWindow.prototype.hideAllSelect=function(){
   var obj;
   obj=document.getElementsByTagName("SELECT");
   var i;
   for(i=0;i<obj.length;i++)
   obj[i].style.visibility="hidden";
   }
 /**
  * 显示所有的select
  */ 
  alternateWindow.prototype.showAllSelect=function(){
   var obj;
   obj=document.getElementsByTagName("SELECT");
   var i;
   for(i=0;i<obj.length;i++)
  obj[i].style.visibility="visible";
 }

</script>
</body>

posted on 2006-08-09 21:30 黑旋风 阅读(2446) 评论(2)  编辑  收藏

评论:
# re: 仿163邮箱的弹出框和询问框 2006-08-09 22:42 | 路人
受益匪浅  回复  更多评论
  
# re: 仿163邮箱的弹出框和询问框 2007-12-07 10:59 | ADASD
与火狐不兼容,没P用  回复  更多评论
  

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


网站导航: