旅途笔记

岂有豪情似旧时，花开花落两由之
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

仿163弹出层

Posted on 2007-05-23 15:19  allonkwok  阅读(1235)  评论(1)  编辑  收藏  举报

<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
  * 说明：本人在申楠同志的《显示提示窗口》基础上，将
  */

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'" +
     " onkeydown='parent.alternateWin.onKeyDown(event,this)'"+
     " onclick='parent.alternateWin.closeWin()' 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";
  }
  }
  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'" +
" onkeydown='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'></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>

<!---------------------------------------------------------------->
<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/>
  １、主要修改了滚屏出现的问题
</p>
<p>版本1.1修改：<br/>
  １、增加了询问框的功能。<br/>
  ２、增加了音效功能<br/>
  ３、修饰界面</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>
</body>