js模拟confirm功能

ㄣ负二代 · 发表于 2013-1-22 12:25:49

confirm和alert对话框，厌恶了，今天要彻底地改变一下这两个对话框，且功能照旧。这里是使用js来实现这个效果
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js模拟confirm和alert功能</title>
<script>
/*
************************************
功能：js模拟confirm、alert效果，改变
它们原始那些灰色的样子
来源：网络
整理：www.aspprogram.cn
************************************
*/
function clk_yes（）
{
alert（"这是confirm效果"）；
}
function clk_no（）
{
alert（"这不是confirm效果"）；
}
var alternateFrame=null;//生成的iframe
var alternateWin=null;
window.alert=showAlert;
window.confirm=showConfirm;
var IsIE=document.all;
function alternateWindow（）{
this.win=null;//生成对话框的窗口对象
this.pBody=null;//生成的body容器对象
this.pBg=null;
this.type="alert";//默认的种类是alert
this.FocusWhere="OK";//焦点在哪个按钮上
}
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=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>"）*/
//上面的ff不能兼容
alternateFrame=document.createElement（"iframe"）；
//alternateFrame.allowTransparency='true';//这个没有什么用啊……
alternateFrame.id='popframe';
alternateFrame.frameborder=0;
alternateFrame.marginheight=0;
alternateFrame.vspace=0;
alternateFrame.hspace=0;
alternateFrame.scrolling="no";
alternateFrame.src='about:blank';
alternateFrame.style.position="absolute";
document.body.appendChild（alternateFrame）；
}else{
alternateFrame.style.visibility="visible";
}
//ff设置位置时要把单位加上
alternateFrame.style.width=screen.availWidth+"px";
alternateFrame.style.height=screen.availHeight+"px";
alternateFrame.style.left=document.body.scrollLeft+"px";
alternateFrame.style.top=document.body.scrollTop+"px";
//alternateFrame.name=alternateFrame.uniqueID;//ff下iframe不支持uniqueID属性
alternateFrame.name="popframe";
//this.win=window.frames[alternateFrame.name];//=========
this.win=IsIE?window.frames[alternateFrame.name]:document.getElementById（"popframe"）。contentWindow;
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=IsIE?this.win.document.body.children[1]:this.win.document.getElementById（"popbody"）；
this.pBg=IsIE?this.win.document.body.children[0]:this.win.document.getElementById（"popbg"）；
this.hideAllSelect（）；
this.initBg（）；
return this.pBody;
}
/**
* 作用：初始化背景层
*/
//=============ff的滤镜播放效果的支持知道怎么搞
alternateWindow.prototype.initBg=function（）{
with（this.pBg.style）{
position="absolute";
left="0";
top="0";
width="100%";
height="100%";
visibility="hidden";
backgroundColor="#000000";
if（IsIE）
filter="blendTrans（duration=1） alpha（opacity=30）";//==========
else//ff下的blendTrans滤镜好象不支持，反正是不知道了
opacity="0.3";//透明度这样设置，是ff时
}
if（IsIE） this.pBg.filters.blendTrans.apply（）；
this.pBg.style.visibility="visible";
if（IsIE） 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/10;
var str;
str ="<table border=0 cellpadding=0 cellspacing=1 bgcolor=#00ff00 width=100% height=100%><tr height=30>";
str+="<td align=left style='color:#e1dfdf;font-size:14px;font-weight:bold' bgcolor=#119035>【新闻详细】<span id=newstitle></span></td></tr>";
str+="<tr><td align=center bgcolor=#81FB8D style='font-size:12px;color:#454545;vertical-align: top;padding-top:5px;'>";
str+=info+"</td></tr><tr height=40 bgcolor=#81FB8D><td align=center>" +
"<input type='button' value='关闭' id='AlertOK'" +//这里id要注意唯一
" onkeydown='parent.alternateWin.onKeyDown（event,this）'"+
" onclick='parent.alternateWin.closeWin（）' style='border:solid 1px #797979;background:#f8f8f8;width:80px; padding:3px;'>" +
"</td></tr></table>";
obj.innerHTML=str;
//这句话有问题，ff不支持all
if（IsIE）this.win.document.body.all.AlertOK.focus（）；else this.win.document.getElementById（"AlertOK"）；
this.FocusWhere="OK";
}
alternateWindow.prototype.onKeyDown=function（event,obj）{
switch（event.keyCode）{
case 9://tab键
//这里事件对象属性和方法使用没加与区别
if（IsIE） event.keyCode=-1;else event.preventDefault（）；
if（this.type=="confirm"）{
if（this.FocusWhere=="OK"）{
if（IsIE）
this.win.document.body.all.ConfirmNO.focus（）；
else
this.win.document.getElementById（"ConfirmNo"）。focus（）；
this.FocusWhere="NO";
}else{
if（IsIE）this.win.document.body.all.ConfirmOK.focus（）；else this.win.document.getElementById（"ConfirmOK"）。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=#81FB8D width=100% height=100%><tr height=30>";
str+="<td align=left style='color:#000000;font-size:14px;font-weight:bold' bgcolor=#119035>[询问]</td></tr>";
str+="<tr><td align=center bgcolor=#81FB8D style='font-size:12px;color:#000000;vertical-align: middle;'>";
str+=info+"</td></tr><tr height=30 bgcolor=#81FB8D><td align=center>" +
"<input type='button' id='ConfirmOK'" +//这里id要注意唯一
" onkeydown='parent.alternateWin.onKeyDown（event,this）'"+
" onclick='parent.alternateWin.closeWin（）；parent."+ok_func+"（）；' " +
" value='"+ok_str+"' style='border:solid 1px #666666;background:#81FB8D'>"+
"   <input type='button' value='"+notok_str+"' id='ConfirmNO'"+//这里id要注意唯一
" onkeydown='parent.alternateWin.onKeyDown（event,this）'"+
" onclick='parent.alternateWin.closeWin（）；" +
" parent."+notok_func+"（）；' style='border:solid 1px #666666;background:#81FB8D'></td></tr></table>";
obj.innerHTML=str;
if（IsIE）this.win.document.body.all.ConfirmOK.focus（）；else this.win.document.getElementById（"ConfirmOK"）。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>
</head>
<body>
<h1>点击下面两个按纽进行测试</h1><br />
<input name="" type="submit" value="confirm效果" />
<input type="button" value="alert效果">
</html>

宇智波·奶嘴 · 发表于 2013-1-22 13:27:06

哇~~大虾多谢分享虽然完全看不懂~~但是目测很高端~~（标题都没看懂）

		自动登录	找回密码
密码			注册

[JS相关教程] js模拟confirm功能