当前位置:K88软件开发文章中心编程语言JavaScriptJS01 → 文章内容

js模拟confirm功能,并去掉它灰色的界面

减小字体 增大字体 作者:佚名     来源:asp编程网  发布时间:2018-12-30 8:56:39

整天对着灰色的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要注意唯一
 
 
 
 
" "+
 
 
 
 
" >
" +
 
 
 
 
"<
/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)
 
&nbs

[1] [2]  下一页


js模拟confirm功能,并去掉它灰色的界面