div 弹出层,屏蔽背景页面,感觉不错
<html>
<head>
<style type="text/css">
* {font-family:verdana;font-size:12px;}
#dhtipscontent {width:240px;height:185px;background:white;border:2px solid #ddd;z-index:102;padding:2px;}
#dhtipsdiv {background:#000;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);z-index:101;border:none;}
#dhtipsiframe {-moz-opacity:0;opacity:0;filter:alpha(opacity=0);z-index:100;border:none;}
.tipsdiv {height:160px;overflow:auto;line-height:150%; border:1px solid #FF9900}
.closediv {height:20px;text-align:right; padding-right:5px; padding-top:5px}
.closebtn {position:relative;top:0px;right:0px;border:1px solid buttonshadow;}
</style>
<script language="javascript">
function checkpwd()
{
var test=window.frames["dhtipsiframe"].document.getElementById("trade_pwd").value;
alert(test);
}
</script>
</head>
<body>
<h1>show tips page</h1>
<select id=sl>
<option>1 show tips page</option>
<option>2 show tips page</option>
<option>3 show tips page</option>
</select>
<br/>
<ul>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
</ul>
<iframe src="about:blank"></iframe>
<hr style="width:1500px;" />
<input type=button value="show tips page 1" style="width:1500px;border:2px outset;" onClick="showtips('<table width=\'240\' border=\'0\' align=\'center\' cellpadding=\'0\' cellspacing=\'0\' class=\'bian02\' bgcolor=\'#FFFFFF\'><tr><td height=\'30\' bgcolor=\'#ffffbb\' style=\'border-bottom:1px solid #dfdbd8;\'><div style=\'float:left; padding-left:10px\'><strong>交易密码确认</strong></div></td></tr><form name=\'trade\' id=\'trade\' method=\'POST\' onKeyDown=\'if(event.keyCode==13){return false;}\'><tr><td height=\'60\' bgcolor=\'ffffe6\'><label><div align=\'center\' id=\'ajaxDIV\'><input type=\'password\' name=\'trade_pwd\' id=\'trade_pwd\' style=\'width:120px;height:20px;\' /> <input type=\'button\' name=\'Submit\' value=\'确认\' onClick=\'return checkpwd()\' /></div></label></td></tr></form><tr><td height=\'47\' bgcolor=\'ffffe6\' style=\'padding:10px\'><span class=\'STYLE1\'><strong>双彩网小贴士:</strong></span><br>为了保证您安全交易,在第一次交易,需要确认您的交易密码。</td></tr></table>')" ID="Button1" NAME="Button1" />
<hr style="width:1500px;" />
<input type=button value="show tips page 2" style="width:1500px;border:2px outset;" onClick="showtips('Tips 2:<br/>Hello,world!<br/>dhTipsLayer author:dh20156')" ID="Button2" NAME="Button2" />
<hr style="width:1500px;" />
<ol>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
</ol>
<br/>
<ul>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
</ul>
<br/>
<ol>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
<li>show tips page</li>
</ol>
</body>
</html>
<script language="javascript" type="text/javascript">
function showtips(tipStr){
//dhTipsLayer:author:dh20156;
if(document.getElementById("dhtipsiframe")==null){
var iframe = document.createElement("IFRAME");
iframe.id = "dhtipsiframe";
iframe.style.position = "absolute";
iframe.style.left = 0;
iframe.style.top = 0;
iframe.style.width = (document.body.scrollWidth>document.body.offsetWidth)?document.body.scrollWidth:document.body.offsetWidth;
iframe.style.height = (document.body.scrollHeight>document.body.offsetHeight)?document.body.scrollHeight+20:document.body.offsetHeight;
var div = document.createElement("DIV");
div.id = "dhtipsdiv";
div.style.position = "absolute";
div.style.left = 0;
div.style.top = 0;
div.style.width = (document.body.scrollWidth>document.body.offsetWidth)?document.body.scrollWidth:document.body.offsetWidth;
div.style.height = (document.body.scrollHeight>document.body.offsetHeight)?document.body.scrollHeight+20:document.body.offsetHeight;
div.oncontextmenu = function(){return false}
div.onselectstart = function(){return false}
var div2 = document.createElement("DIV");
div2.id = "dhtipscontent";
div2.style.position = "absolute";
div2.style.left = document.body.offsetWidth/2-150+document.body.scrollLeft;
div2.style.top = document.body.offsetHeight/2-150+document.body.scrollTop;
div2.innerHTML = "<div class=\"tipsdiv\">"+tipStr+"</div><div class=\"closediv\"><input type=\"button\" class=\"closebtn\" value=\"关闭\" onclick=\"document.body.style.overflow='auto';document.getElementById('dhtipsiframe').style.display='none';document.getElementById('dhtipsdiv').style.display='none';document.getElementById('dhtipscontent').style.display='none';\" /></div>";
div2.oncontextmenu = function(){return false}
document.body.appendChild(iframe);
document.body.appendChild(div);
document.body.appendChild(div2);
}else{
document.getElementById("dhtipsiframe").style.display = "block";
document.getElementById("dhtipsdiv").style.display = "block";
document.getElementById("dhtipscontent").style.display = "block";
document.getElementById("dhtipscontent").innerHTML = "<div class=\"tipsdiv\">"+tipStr+"</div><div class=\"closediv\"><input type=\"button\" class=\"closebtn\" value=\"关闭\" onclick=\"document.body.style.overflow='auto';document.getElementById('dhtipsiframe').style.display='none';document.getElementById('dhtipsdiv').style.display='none';document.getElementById('dhtipscontent').style.display='none';\" /></div>";
document.getElementById("dhtipscontent").style.left = document.body.offsetWidth/2-150+document.body.scrollLeft;
document.getElementById("dhtipscontent").style.top = document.body.offsetHeight/2-150+document.body.scrollTop;
}
var l = document.body.scrollLeft;
var t = document.body.scrollTop;
document.body.style.overflow = "hidden";
document.body.scrollLeft = l;
document.body.scrollTop = t;
}
</script>