<style>
/* container */
body {margin:0; padding:0; text-align:center; font-family:Verdana,"宋体"; font-size:12px; color:#333;}
form,ul,ol,li,dl,dt,dd {margin:0; padding:0;}
div{text-align:center; margin:0 auto; padding:0;}
input{color:#333; font-size:12px; font-family:Arial;}
ul,li{list-style:none;}
img,a img {border-width:0;}
/* opennav */
.navigator_bg{position:absolute; width:100%; height:1000px; background-color:#234f74; filter:alpha(opacity=40); -moz-opacity:0.4;}
#navigator, #xyeva{position:absolute; width:459px; height:281px; background-color:#fff; margin-left:-231px; padding:0px; z-index:99; top:100px; left:50%;}
/*.tabborder {float:left; width:462px; height:285px;} */
.tab {float:left; width:457px; height:279px; border: 1px solid #A5E3ED;}
.tabtitle{width:455px; height:28px; border:1px solid #FFF; background:url(http://www.cnblogs.com/images/cnblogs_com/amwggyy504/TabTitleBg.jpg) repeat-x left top; color:#0079BC; font-size:14px; line-height:28px;}
.tabtitle img{float:right; margin:7px 10px 0 0;}
.tabcontent{width:457px; height:248px; border-top:1px solid #A5E3ED; background:url(http://www.cnblogs.com/images/cnblogs_com/amwggyy504/TabContentBg.jpg) no-repeat left top;}
.tabcontent ul{padding:20px 0; width:417px; margin-left:20px; *margin-left:0px; border-bottom:1px dotted #0079BC; text-align:left; line-height:20px; color:#0079BC;}
.tabcontent li{padding:0 10px;}
.tabcontent input{margin:0px 5px;}
</style>
<a href="#" onclick="openEva();">弹出</a>
<script language="javascript">
function openEva(){
var nav = new Navigator();
nav.createWin();
}
var preObjects = null;
var Navigator = function(id){
this.id = id;
};
Navigator.initIndex = 0;
Navigator.CONTAINER = "navigator";
Navigator.prototype.createWin = function(){
Mark.showHintDiv();
var html = "";
var container = document.createElement("DIV");
container.id = Navigator.CONTAINER;
html += "<div class='tabborder'>"
html += " <div class='tab'>"
html += " <div class='tabtitle'><ul><li style='float:left; padding-left:183px;'><strong>弹出框</strong></li><li style='float:right; width:20px;'><a href='javascript:Mark.close();'><img src='http://images.cnblogs.com/cnblogs_com/amwggyy504/TabTitleClose.jpg'></img></a></ul></div>"
html += " <div class='tabcontent'>"
html += " <ul><li>自定义显示的内容</li></ul>"
html += " <ul><li>自定义显示的内容</li></ul>"
html += " </div>"
html += " </div>"
html += "</div>"
container.innerHTML = html;
document.body.appendChild(container);
}
/* 生成页面遮盖的方法 */
function gernateDivBg(){
var bg = document.createElement("DIV");
document.documentElement.style.overflow = "hidden";
with(bg.style){
position = "absolute";
top = "0px";
left = "0px";
width = document.documentElement.scrollWidth;
height = document.documentElement.scrollHeight;
}
return bg;
};
var Mark = new Object();
Mark.showHintDiv = function(){
var bg = gernateDivBg();
bg.id = Mark.id;
bg.className = "navigator_bg";
document.body.appendChild(bg);
}
Mark.close = function(){
if(document.getElementById(Mark.id)){
document.body.removeChild(document.getElementById(Mark.id));
}
if(document.getElementById(Navigator.CONTAINER))
document.body.removeChild(document.getElementById(Navigator.CONTAINER));
document.documentElement.style.overflowX= "hidden";
document.documentElement.style.overflowY= "auto";
};
</script>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<title>仿163邮箱效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="robots" content="all" />
<meta name="author" content="爱左看右" />
<meta name="copyright" content="www.msleft.com" />
<meta name="keywords" content="重构,web标准,msleft,www.msleft.com,爱左看右" />
<meta name="description" content="重构,web标准,msleft,www.msleft.com,爱左看右" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
/*
update: 爱左看右 2007-06-13
http://www.msleft.com/review/alpha.html
*/body {
text-align: center;
color: #000;
margin: 0 auto;
padding: 0;
font: 12px Verdana,Tahoma,sans-serif,Arial,宋体;
line-height: 1.6em;
letter-spacing: 1.4px;
}
* { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,p { display: block; text-align: left; }
table { border: 0; margin: 0; padding: 0; border-collapse : collapse; }
img { border: 0; }
a { text-decoration: none; color: #000; }
a:hover { color: #c00; text-decoration: none; }#wrap {
text-align: center;
margin: 0 auto ;
padding: 50px 0 ;
width: 300px;
background: #ccc;
}
#showBox {
text-align: center;
position: absolute;
left: 0;
top: 0;
z-index: 99;
width: 100%;
height: 100%;
}
#msleft {
position: absolute;
left: 0;
top: 0;
z-index: 1002;
width: 100%;
height: 100%;
}
#alphaBox {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: #000;
filter:alpha(opacity=60); /* IE */
opacity: 0.6; /* 支持CSS3的浏览器（FF 1.5也支持）*/
-moz-opacity: 0.6; /* Moz + FF */
}
#content {
color: #416f02;
margin: 0 auto;
margin-top: 150px;
width: 400px;
height: 200px;
padding-left: 50px;
border: 10px solid #ff7e02;
background-color: #fff;
}
#content h2 { font-size: 22px; color: #c00; padding: 10px 0; text-align: center; }
#content a { color: #416f02; }
#content a:hover { color: #c00; }.intro{ color: #c27006; }
.close { text-align: right; height: 20px; margin: 20px 20px 0 0; }
</style>
<script type="text/javascript">
<!--
function boxAlpha() {
var showBox=document.getElementById("showBox");
var bgalpaha = document.getElementById("alphaBox");
var content = document.getElementById("content");
if(showBox.style.display == "none") {
showBox.style.display = "block";
showBox.style.height = document.documentElement.scrollHeight;
bgalpaha.style.height= document.documentElement.scrollHeight+"px";
if (navigator.appName == "Microsoft Internet Explorer")
bgalpaha.style.width = document.documentElement.scrollWidth + "px";
else
bgalpaha.style.width = document.documentElement.scrollWidth + "px";
// alert(document.documentElement.scrollHeight);
}
else
showBox.style.display = "none";
}
//-->
</script>
</head>
<body>
<div id="wrap">
<a href="javascript:;" onclick="boxAlpha();">点击测试163邮箱效果</a>
</div>
<div id="showBox" style="display:none;">
<div id="msleft">
<div id="content">
<h2>爱左看右</h2>
<p><strong>呢称</strong>：爱左看右</p>
<p><strong>星座</strong>：螃蟹座(可以横行滴^_^)</p>
<p><strong>类型</strong>：半人半神亦半鬼</p>
<p><strong>个站</strong>：<a href="http://www.msleft.com" title="爱左看右">http://www.msleft.com</a></p>
<p><strong>介绍</strong>：一棵花心的萝卜</p>
<p class="intro"><strong>HTML代码功能</strong>：自适应宽高透明遮罩效果</p>
<p class="close"><input type="button" name="button" onclick="boxAlpha();" value="关闭" />
</div>
</div>
<div id="alphaBox" ></div>
</div>
</body>
</html>
兼容IE FF
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<title>仿163邮箱效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="robots" content="all" />
<meta name="author" content="爱左看右" />
<meta name="copyright" content="www.msleft.com" />
<meta name="keywords" content="重构,web标准,msleft,www.msleft.com,爱左看右" />
<meta name="description" content="重构,web标准,msleft,www.msleft.com,爱左看右" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
/*
update: 爱左看右 2007-06-13
http://www.msleft.com/review/alpha.html
*/body {
text-align: center;
color: #000;
margin: 0 auto;
padding: 0;
font: 12px Verdana,Tahoma,sans-serif,Arial,宋体;
line-height: 1.6em;
letter-spacing: 1.4px;
}
* { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,p { display: block; text-align: left; }
table { border: 0; margin: 0; padding: 0; border-collapse : collapse; }
img { border: 0; }
a { text-decoration: none; color: #000; }
a:hover { color: #c00; text-decoration: none; }#wrap {
text-align: center;
margin: 0 auto ;
padding: 50px 0 ;
width: 300px;
background: #ccc;
}
#showBox {
text-align: center;
position: absolute;
left: 0;
top: 0;
z-index: 99;
width: 100%;
height: 100%;
}
#msleft {
position: absolute;
left: 0;
top: 0;
z-index: 1002;
width: 100%;
height: 100%;
}
#alphaBox {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: #000;
filter:alpha(opacity=60); /* IE */
opacity: 0.6; /* 支持CSS3的浏览器（FF 1.5也支持）*/
-moz-opacity: 0.6; /* Moz + FF */
}
#content {
color: #416f02;
margin: 0 auto;
margin-top: 150px;
width: 400px;
height: 200px;
padding-left: 50px;
border: 10px solid #ff7e02;
background-color: #fff;
}
#content h2 { font-size: 22px; color: #c00; padding: 10px 0; text-align: center; }
#content a { color: #416f02; }
#content a:hover { color: #c00; }.intro{ color: #c27006; }
.close { text-align: right; height: 20px; margin: 20px 20px 0 0; }
</style>
<script type="text/javascript">
<!--
function boxAlpha() {
var showBox=document.getElementById("showBox");
var bgalpaha = document.getElementById("alphaBox");
var content = document.getElementById("content");
if(showBox.style.display == "none") {
showBox.style.display = "block";
showBox.style.height = document.documentElement.scrollHeight;
bgalpaha.style.height= document.documentElement.scrollHeight+"px";
if (navigator.appName == "Microsoft Internet Explorer")
bgalpaha.style.width = document.documentElement.scrollWidth + "px";
else
bgalpaha.style.width = document.documentElement.scrollWidth + "px";
// alert(document.documentElement.scrollHeight);
}
else
showBox.style.display = "none";
}
//-->
</script>
</head>
<body>
<div id="wrap">
<a href="javascript:;" onclick="boxAlpha();">点击测试163邮箱效果</a>
</div>
<div id="showBox" style="display:none;">
<div id="msleft">
<div id="content">
<h2>爱左看右</h2>
<p><strong>呢称</strong>：爱左看右</p>
<p><strong>星座</strong>：螃蟹座(可以横行滴^_^)</p>
<p><strong>类型</strong>：半人半神亦半鬼</p>
<p><strong>个站</strong>：<a href="http://www.msleft.com" title="爱左看右">http://www.msleft.com</a></p>
<p><strong>介绍</strong>：一棵花心的萝卜</p>
<p class="intro"><strong>HTML代码功能</strong>：自适应宽高透明遮罩效果</p>
<p class="close"><input type="button" name="button" onclick="boxAlpha();" value="关闭" />
</div>
</div>
<div id="alphaBox" ></div>
</div>
</body>
</html>
兼容IE FF
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<TITLE>用Div仿showModalDialog模式菜单的效果</TITLE>
<STYLE TYPE="text/css" >
body{margin:0;padding:0;}
.popupdiv{text-align:left;display:block; position:absolute; top:50%; left:50%;z-index:999; }
#popupbg,.popupifra{ background:#000; width:100%; position:absolute; top:0; left:0; z-index:998;opacity:0.3;filter:Alpha(opacity=30);}
.popupifra{display:block; border:none; background:none; z-index:997; background-color:transparency;filter:Alpha(opacity=0);}
.hidden { display:none; height:100%;}
.show { display:block;}</STYLE>
<SCRIPT LANGUAGE="JavaScript">
// author:ycsy520
// version:0.1.2
// date:2008/07/12var POPUP = {
getH:function(){
if (window.innerHeight && window.scrollMaxY) {
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){
yScroll = document.body.scrollHeight;
} else {yScroll = document.body.offsetHeight;}
return yScroll;
},
pw:function(el){
if(!document.getElementById(el)){return false;}
if(!document.createElement){return false;}
POPUP.cpw(el);
if(POPUP.hasSlt()){POPUP.cifr();}
},
cpw:function(el){
el= document.getElementById(el);
el.className = "popupdiv";
el.style.marginLeft = "-" + el.clientWidth/2 + "px";
pwb = document.createElement('div');
pwb.setAttribute('id','popupbg');
ph =el.clientHeight;
sh = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
bh = POPUP.getH();
if(ph>bh){
el.style.marginTop = "-180px";
pwb.style.height = ph+180+"px";
}else{
if(ph>sh){
pwb.style.height = bh>ph?bh+'px':ph+'px';
el.style.marginTop = '-180px';
}else{
el.style.marginTop = "-" + ph/2 + 'px';
pwb.style.height = sh>bh?sh+'px':bh+'px';
}
}
return document.body.appendChild(pwb);
},
cifr:function(){
if(!document.createElement("iframe")){return false;};
ifr = document.createElement("iframe");
ifr.setAttribute("id","divshim");
ifr.setAttribute("src","javascript:void(0);");
ifr.setAttribute("scrolling","no");
ifr.setAttribute("frameborder","0");
ifr.setAttribute("allowtransparency","true");
POPUP.insertAfter(ifr,pwb);
ifr.className = "popupifra";
ifr.style.height = pwb.style.height;
ifr.style.width = pwb.style.width;
},
insertAfter:function(nEl,tEl) {
var p = tEl.parentNode;if (p.lastChild == tEl) {p.appendChild(nEl);
} else {p.insertBefore(nEl,tEl.nextSibling); }
},
hasSlt:function(){
var a = document.getElementsByTagName('*');
var hasSlt = false;
for(var i=a.length-1;i>=0;i--){
if(a[i].nodeName == 'SELECT'){hasSlt = true;break;}
}
return hasSlt;
},
attr:function(el,name,value){
if(!name || name.constructor != String){return '';}
name = {'for':'htmlFor','class':'className'}[name] || name;
if(typeof value != 'undefined'){
el[name] = value;
if(el.setAttribute){el.setAttribute(name,value);}
return el[name] || el.getAttribute(name) || '';
}
},
cw:function(el){
pwb.className = "hidden";
document.getElementById(el).className = "hidden";
if(POPUP.hasSlt()){ifr.className="hidden"}
}
}function addLoadEvent(func){var oldonload = window.onload;if(typeof window.onload != 'function')
{window.onload = func;}else{window.onload = function(){oldonload();func();}}}addLoadEvent(POPUP.getH);</SCRIPT></HEAD>
<BODY>
<div id="bigFram" class="hidden">
<div style="height:100%; width:900px; background:#fff; border:2px solid #ccc; ">
<span style="display:block; line-height:30px; text-align:right; padding-right:10px; background:#f1f1f1;">
<a onclick="POPUP.cw('bigFram');">关闭</a> </span>
jjjjjjjjjjjjjjjjjjjj
hhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhh
</div>
</div>
<div style="text-align:left; line-height:30px; margin-left:150px;">
<br />
<a onclick="POPUP.pw('bigFram');">比较大的弹出提示</a> <br />
</div>
</BODY>
</HTML>
兼容IE FF