<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>????棰???妗?lt;/title>
<script type="text/javascript">
function MessageBox(winpop,width,height,title,content){
?this.timer=null;
?this.Width=width;
?this.Height=height;
?this.Winpop=winpop;
?this.Title=title;
?this.Content=content;
?this.Init();
?this.show_pop();
}
MessageBox.prototype.Init=function()
{
?var obj=this;
?var s='<div id="'+obj.Winpop+'" style="width:'+obj.Width+'px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #999999; margin:0; padding:1px; overflow:hidden;display:none; background:#FFFFFF;"><div style="width:100%; height:20px; line-height:20px; background:#FFCC00; font-weight:bold;font-size:12px;padding-left:5px;">'+obj.Title+'<span id="'+obj.Winpop+'_close" style="position:absolute; right:4px; top:-1px; color:#FFFFFF; cursor:pointer;">X</span></div><div style="width:100%; height:'+(obj.Height-20)+'px; line-height:23px; overflow-y:auto; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; padding:5px;">'+obj.Content+'</div></div>';
?document.body.innerHTML+=s;
?document.getElementById(obj.Winpop+"_close").慰nclick=function(){obj.hid_pop();}
}
MessageBox.prototype.changeH=function(addH)
{
?var obj=this;
?var MsgPop=document.getElementById(obj.Winpop);
?var popH=parseInt(MsgPop.style.height||MsgPop.currentStyle.height);//??parseInt灏?瀵矽薄??楂?搴?漿??涓烘?闆??,浠ユ?逛究涓??㈡??杈?锛?JS璇?lt;style>涓???height瑕???currentStyle.height"锛?
?if (popH<=obj.Height&&addH>0||popH>=4&&addH<0){//濡???楂?搴??浜?绛?浜?100(str>0)??楂?搴?ぇ浜?绛?浜?4(str<0)
??MsgPop.style.height=(popH+addH).toString()+"px";//楂?搴????????灏?4涓?璞＄?
?}
?else{//????
??clearInterval(obj.timer);//??娑?璋???????灏辨??濡???楂?搴??杩?100璞＄?浜?,灏變???澧??誇?锛???楂?搴???浜?0璞＄?浜?锛?灏變?????灏?浜?
??MsgPop.style.display=addH>0?"block":"none"//??涓?绉誨?ㄦ?剁???ｆ?劇ず,??涓?绉誨?ㄦ?剁???ｉ????锛???涓虹???ｆ??杈規?,??浠ヨ?????浠ョ??瑙?1~2璞＄?娌＄緝杩???杩??跺??灏辨??DIV??????锛?
?}
}?
MessageBox.prototype.show_pop=function()
{
?var obj=this;
?var c=function(){obj.changeH(4);};
?document.getElementById(obj.Winpop).style.display="block";
?obj.timer=setInterval(c,2);//璋???hangeH(4),姣?0.002绉???涓?绉誨?ㄤ?娆?}
MessageBox.prototype.hid_pop=function()
{
?var obj=this;
?var c=function(){obj.changeH(-4);};
?obj.timer=setInterval(c,2);//璋???hangeH(-4),姣?0.002绉???涓?绉誨?ㄤ?娆?}
</script>
?
</head>
<body>
<script type="text/javascript">
new MessageBox("winpop1",300,170,"姣?涓?","澶у?跺ソ<br>???ュ?芥?ョ??);
new MessageBox("winpop2",200,150,"姣?涓?2","澶у?跺ソ<br>???ュ?芥?ョ??");
</script>
</body>
</html>
?
杞?杞戒?:https://www.cnblogs.com/hanwater/archive/2010/05/04/1727079.html
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)