Board logo

标题: div覆盖select表单元素 [打印本页]
作者: fangzhen    时间: 2009-2-16 10:42     标题: div覆盖select表单元素

<html>
<head>
<style type="text/css">
* {font-family:verdana;font-size:12px;}
#dhtipscontent {width:300px;height:150px;background:white;border:5px solid #ddd;z-index:102;padding:5px;}
#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:120px;overflow:auto;line-height:150%;}
.closediv {height:25px;text-align:right;}
.closebtn {position:relative;top:0px;right:0px;border:1px solid buttonshadow;}
</style>
</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;" ID="Button1" NAME="Button1" />
<hr style="width:1500px;" />
<input type=button value="show tips page 2" style="width:1500px;border:2px outset;" 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=\"close\" 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=\"close\" 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>



欢迎光临 PHP开发笔记 (http://phpvi.com/) Powered by Discuz! 6.1.0