美丽模态窗口
Code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试模态PopWin</title>
<style>
.errMainArea {
BACKGROUND: url(http://mimg.4lou.com/style_v3/bg_m2.gif) repeat-y; LEFT: 0px; WIDTH: 305px; POSITION: absolute; TOP: 0px
}
.errTopArea {
PADDING-RIGHT: 10px; PADDING-LEFT: 25px; FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND: url(http://mimg.4lou.com/style_v3/bg_m1.gif) no-repeat 50% top; PADDING-BOTTOM: 3px; COLOR: #6089ce; PADDING-TOP: 5px
}
.errTxtArea {
BORDER-RIGHT: #c4bcd3 1px solid; PADDING-RIGHT: 14px; BORDER-TOP: #c4bcd3 1px solid; PADDING-LEFT: 14px; BACKGROUND: url(http://mimg.4lou.com/style_v3/bg_face.gif) #e5edf9 no-repeat 15px 15px; PADDING-BOTTOM: 15px; MARGIN: 5px 14px 0px; BORDER-LEFT: #c4bcd3 1px solid; LINE-HEIGHT: 16px; PADDING-TOP: 15px; BORDER-BOTTOM: #c4bcd3 1px solid
}
.errTxtArea .txt_title {
FONT-WEIGHT: bold; FONT-SIZE: 14px; MARGIN-LEFT: 12px
}
.errTxtArea .txt_title {
COLOR: #7e937e
}
.errTxtArea .txt_title A {
COLOR: #7e937e
}
.errTxtArea .txt_others {
MARGIN-TOP: 10px; FONT-SIZE: 12px; COLOR: #95a293; LINE-HEIGHT: 16px; FONT-FAMILY: "宋体"
}
.errBtmArea {
PADDING-RIGHT: 8px; PADDING-LEFT: 8px; BACKGROUND: url(http://mimg.4lou.com/style_v3/bg_m1.gif) no-repeat 50% bottom; PADDING-BOTTOM: 10px; PADDING-TOP: 7px; TEXT-ALIGN: center
}
.btnFn {
BORDER-RIGHT: #7f84e7 1px solid; PADDING-RIGHT: 0px! important; BORDER-TOP: #7f84e7 1px solid; PADDING-LEFT: 0px! important; BACKGROUND-IMAGE: url(http://mimg.4lou.com/style_v3/bg_btn.gif); PADDING-BOTTOM: 0px! important; BORDER-LEFT: #7f84e7 1px solid; WIDTH: 74px; CURSOR: hand; COLOR: #2b327a; PADDING-TOP: 3px; BORDER-BOTTOM: #7f84e7 1px solid; HEIGHT: 22px; BACKGROUND-COLOR: #e1f1d4; TEXT-ALIGN: center
}
.msgbox_mask {
Z-INDEX: 99999; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: #000000
}
</style>
<script language="javascript">
function showObj(o){if(o.style.display=='none')o.style.display='block'};
function hideObj(o){if((o.style.display=='block')||(o.style.display==''))o.style.display='none'};
var MB_OK=0;
var MB_CANCEL=1;
var MB_OKCANCEL=2;
var MB_YES=3;
var MB_NO=4;
var MB_YESNO=5;
var MB_YESNOCANCEL=6;
var MB_OK_TEXT='确定';
var MB_CANCEL_TEXT='取消';
var MB_YES_TEXT='是';
var MB_NO_TEXT='否';
var MB_ICON="";
var MB_OK_METHOD=null;
var MB_CANCEL_METHOD=null;
var MB_YES_METHOD=null;
var MB_NO_METHOD=null;
var MB_BACKCALL=null;
var MB_STR='<div id="msgBoxMask" class="msgbox_mask" style="filter: alpha(opacity=0);display:none;"></div>'+'<div class="errMainArea" style="display:none; z-index:100000;" id="msgBox">'+'<div class="errTopArea" id="msgBoxTitle"></div>'+'<div class="errTxtArea" id="msgBoxContent"></div>'+'<div class="errBtmArea" id="msgBoxControl"></div>'+'</div>';
var Timer=null;
var msgBoxShow=false;
document.write(MB_STR);
var icon=new Image();
icon.src=MB_ICON;
function MessageBox()
{
var _content=arguments[0]||"";
var _title=arguments[1]||'提示';
var _icon=arguments[2] || MB_ICON;
var _button=arguments[3] || MB_OK;
MB_BACKCALL=arguments[4];
var _iconStr='<img src="{0}" alt="" />';
var _btnStr='<input name="{0}" id="{0}" type="button" class="btnFn" value="{1}" onclick="MBMethod(this)" />';
switch(_button){
case MB_CANCEL:_btnStr=_btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT);break;
case MB_YES:_btnStr=_btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT); break;
case MB_NO:_btnStr=_btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT);break;
case MB_OKCANCEL:_btnStr=_btnStr.toFormatString("msgBoxBtnOk", MB_OK_TEXT)+" "+_btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT);break; case MB_YESNO:_btnStr=_btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT)+" "+_btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT);break;
case MB_YESNOCANCEL:_btnStr=_btnStr.toFormatString("msgBoxBtnYes",MB_YES_TEXT)+" "+_btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT)+" "+_btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT);break;
default:_btnStr=_btnStr.toFormatString("msgBoxBtnOk", MB_OK_TEXT);break;
};
ScrollTop=GetBrowserDocument().scrollTop;
ScrollLeft=GetBrowserDocument().scrollLeft;
GetBrowserDocument().style.overflow="hidden";
GetBrowserDocument().scrollTop=ScrollTop;
GetBrowserDocument().scrollLeft=ScrollLeft;
$("msgBoxTitle").innerHTML=_title;
$("msgBoxContent").innerHTML=_content;
$("msgBoxControl").innerHTML=_btnStr;
OpacityValue=0;
showObj($('msgBox'));
try{$("msgBoxMask").filters("alpha").opacity=0;}
catch(e){};
$("msgBoxMask").style.opacity=0;
showObj($('msgBoxMask'));
$("msgBoxMask").style.height=GetBrowserDocument().clientHeight+"px";
$("msgBoxMask").style.width=GetBrowserDocument().clientWidth+"px";
Timer=setInterval("DoAlpha()",1);
var gBodyHeight=document.documentElement.clientHeight;
var gBodyWidth=document.documentElement.clientWidth;
gBodyWidth=(gBodyWidth - $("msgBox").offsetWidth)/ 2;
gBodyHeight=(gBodyHeight - $("msgBox").offsetHeight)/ 2;
$("msgBox").style.marginTop=gBodyHeight+"px";
$("msgBox").style.marginLeft=gBodyWidth+"px";
if(_button==MB_OK || _button==MB_OKCANCEL)
{$("msgBoxBtnOk").focus();}
else if(_button==MB_YES || _button==MB_YESNO || _button==MB_YESNOCANCEL)
{$("msgBoxBtnYes").focus();}
}
var OpacityValue=0;var ScrollTop=0;var ScrollLeft=0;
function GetBrowserDocument()
{
var _dcw=document.documentElement.clientHeight;
var _dow=document.documentElement.offsetHeight;
var _bcw=document.body.clientHeight;
var _bow=document.body.offsetHeight;
if(_dcw==0)return document.body;
if(_dcw==_dow)return document.documentElement;
if(_bcw==_bow && _dcw !=0)return document.documentElement;
else return document.body;
};
function SetOpacity(obj,opacity)
{
if(opacity >=1 )opacity=opacity / 100;
try{obj.style.opacity=opacity; }
catch(e){}
try{if(obj.filters){obj.filters("alpha").opacity=opacity * 100;}}
catch(e){}
};
function DoAlpha(){if(OpacityValue > 4){clearInterval(Timer);return 0;}OpacityValue+=4;SetOpacity($("msgBoxMask"),OpacityValue);};
function MBMethod(obj){
switch(obj.id){
case "msgBoxBtnOk" :
if(MB_BACKCALL){MB_BACKCALL(MB_OK);} else {if(MB_OK_METHOD)MB_OK_METHOD();} break;
case "msgBoxBtnCancel" : if(MB_BACKCALL){MB_BACKCALL(MB_CANCEL);} else {if(MB_CANCEL_METHOD)MB_CANCEL_METHOD();} break;
case "msgBoxBtnYes" : if(MB_BACKCALL){MB_BACKCALL(MB_YES);} else {if(MB_YES_METHOD)MB_YES_METHOD();} break;
case "msgBoxBtnNo" : if(MB_BACKCALL){MB_BACKCALL(MB_NO);} else {if(MB_NO_METHOD)MB_NO_METHOD();} break;
}
MB_OK_METHOD=null;
MB_CANCEL_METHOD=null;
MB_YES_METHOD=null;
MB_NO_METHOD=null;
MB_BACKCALL=null;
MB_OK_TEXT='确定';
MB_CANCEL_TEXT='取消';
MB_YES_TEXT='是';
MB_NO_TEXT='否';
hideObj($('msgBox'));
hideObj($('msgBoxMask'));
GetBrowserDocument().style.overflow="";
GetBrowserDocument().scrollTop=ScrollTop;GetBrowserDocument().scrollLeft=ScrollLeft;
}
String.prototype.toFormatString=function(){
var _str=this;
for(var i=0; i < arguments.length; i++)
{_str=eval("_str.replace(/\\{"+i+"\\}/ig,'"+arguments[i]+"')");}
return _str;
};
function $(objId)
{
if(document.getElementById && document.getElementById(objId))
{return document.getElementById(objId);}
else if(document.all && document.all(objId))
{return document.all(objId);}
else if(document.layers && document.layers[objId])
{return document.layers[objId];}
else{return false;}
};
</script>
</head>
<body>
<br />
<br />
<input onclick="MessageBox('测试成功！')" type="button" value="测试美丽弹出模态窗口" /> <br />
<br />
</body>
</html>
浙公网安备 33010602011771号