天天看点

仿163弹出层

<script language="javascript">

/**

 * 功能:显示提示窗口

 * 作者:申楠 qq:38371354 email:[email protected] http;//amushen.cnblogs.com

 * 日期:2005-10-26

 * 版本:1.1

 * 备注:版权没有,随便拷贝,如果用于商业应用请通知本人,同时保留这段注释。

 *

 */

 /**

  * 改造:黑旋风 qq:23929003 email:[email protected]

  * 日期: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";

  /**

function showconfirm(info,ok_func,notok_func,ok_str,not_okstr){

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){

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){

if(ok_str==null){

ok_str="确定";

if(notok_str==null){

notok_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>";

"<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'>"+

"   <input type='button' value='"+notok_str+"' id='no'"+

" onclick='parent.alternatewin.closewin();" +

" parent."+notok_func+"();' style='border:solid 1px #666666;background:#cccccc'></td></tr></table>";

 * 作用:关闭一切

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(){

obj[i].style.visibility="visible";

</script>

<!---------------------------------------------------------------->

<script>

function clk_yes(){

alert("你也同意了我的观点");

function clk_no(){

alert("不是你眼花了就是我眼花了!");

<body>

<button onclick="alert('我觉得今天天气真的很不错!')">test</button>

<button onclick="confirm('今天天气真的很好啊,难道不是么?','clk_yes','clk_no','就算是吧','乱讲')">询问框测试</button>

<p><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:[email protected] 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>