难题解决不了啊 ---- 关于用透明层遮住下面的网页问题

<html>
<head>
<style>
*{ margin:0; padding:0;}
body{ height:100%;}
.dis{ width:100%; background: green; position:absolute; left:0; right:0; top:0; bottom:0; -moz-opacity:0.5; filter:alpha(opacity=50);z-index:99; height:100%; }
</style>
</head>
<body>
<select id=sl>
<option>1</option>
<option>2</option>
<option>3</option>
</select><br/>
dsdddddddddddddddd<br/>
<input type=button value="change" onclick=test() ID="Button1" NAME="Button1"></body>
</html>
<script>
function test()
{
var div = document.createElement("div");
var iframe = document.createElement("iframe"); iframe.className="dis";

div.className="dis";div.appendChild(iframe);
document.getElementsByTagName("body")[0].appendChild(div);}
</script>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

那就头疼医头，脚疼医脚，虽然恶劣点，呵呵。下把那个select给hidden，然后你再让他display呢？
to bigman_lfj(盐水小鱼)
隐藏倒是可能解决，但客户那里不同意啊
如果一定要做到，那就把select都disabled掉.<html>
<head>
<style>
*{ margin:0; padding:0;}
body{ height:100%;}
.dis{ width:100%;  background: green; position:absolute; left:0; right:0; top:0; bottom:0; -moz-opacity:0.5; filter:alpha(opacity=50);z-index:99; height:100%; }
</style>
</head>
<body>
<select id=sl>
<option>1</option>
<option>2</option>
<option>3</option>
</select><br/>
dsdddddddddddddddd<br/>
<input type=button value="change" onclick=test() ID="Button1" NAME="Button1"></body>
</html>
<script>
function test()
{
var div = document.createElement("<div class='dis'>");
div.innerHTML=" "
document.body.appendChild(div);
var allSelects=document.getElementsByTagName("select");
for(var i=0;i<allSelects.length;i++)
{
  allSelects[i].disabled=true;
}
}
</script>
IFRAME背景透明
<BODY STYLE="background-color: red">
<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true">
</IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true"
STYLE="background-color: green">
</IFRAME>
<IFRAME ID="Frame3" SRC="transparentBody.htm">
</IFRAME>
<IFRAME ID="Frame4" SRC="transparentBody.htm"
STYLE="background-color: green">
</IFRAME>
</BODY>
要是可以修改select的样式就完美了
to JK_10000(JK)
disabled只是灰掉，但是不遮住还是不行
to ttyp(@http://www.cnblogs.com/ttyp/)
你的方法似乎不行
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
</head><body >
text
<select><option >test</option></select>
<input>
<a href=#>a</a>
<input type=button value="点击将页面灰掉," onclick="disableBodyArea(window);">
</body></html>
<script defer >function disableBodyArea(winObj)
{
//if(!document.all) return false;//For firefox etc.
var topCoverDiv=winObj.document.createElement("<div style='position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=20);background-color:#888888;' oncontextmenu='return false;'>");
topCoverDiv.innerHTML=" "
winObj.document.body.appendChild(topCoverDiv);
var allSelects=winObj.document.getElementsByTagName("select");
for(var i=0;i<allSelects.length;i++) {
allSelects[i].disabled=true;
allSelects[i].style.backgroundColor="#EEEEEE";
}
}
</script>
效果见
http://xlite.lanqiaobiz.com/web/test.htm
需要一个list.gif来做背景，
<html>
<head>
<style>
*{margin:0;padding:0}
body{height:100%;}
.dis{ width:100%; background: green; position:absolute; left:0; right:0; top:0; bottom:0; -moz-opacity:0.5; filter:alpha(opacity=50);z-index:99; height:90%; }
.hack{
position:absolute;
background:url(list.gif) no-repeat right;
}
</style>
</head>
<body>
<p>dsdddddddddddddddd</p>
<p>
<select id=s1>
<option>11111111</option>
<option>222222222222</option>
<option>3333333333333333</option>
</select>
</p>
<p>
<select id=s1 style="width:300px">
<option>AAAAA</option>
<option>BBBBB</option>
<option>CCCCCCCCCCCCCCCCC</option>
</select>
</p>
<input type="button" value="change" onclick=test() ID="Button1" NAME="Button1"><input type="button" value="取消" onclick="hide()" style="margin-top:60%"/>
</body>
</html>
<script>
function test()
{
var div = document.createElement("div");
var iframe = document.createElement("iframe");
div.id = "frameContainer";
iframe.className="dis";
div.className="dis";
div.appendChild(iframe);
document.getElementsByTagName("body")[0].appendChild(div);
var sel = document.getElementsByTagName("select");
if(!window.ActiveXObject) return; for(i=0;i<sel.length;i++){
rect = sel[i].getBoundingClientRect();
var inp = document.createElement("input");
inp.type="text";
inp.id = "selectHack";
inp.className = 'hack';
inp.style.left = rect.left -2;
inp.style.top  = rect.top - 2;
inp.style.width = rect.right - rect.left;
inp.style.paddingLeft = "3px";
inp.style.paddingTop  = "1px";
inp.value = sel[i].options[sel[i].selectedIndex].text
document.body.appendChild(inp); }
}function hide()
{
var fc = document.getElementById("frameContainer");
fc.parentNode.removeChild(fc);
    if(!window.ActiveXObject) return;
inp = document.getElementsByName("selectHack");
for(i=0;i<inp.length;i++)
{
inp[i].removeNode(true);
}
}
</script>
参考<HTML><HEAD><TITLE>WWW.Seolm.Com 无为Tools</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1578" name=GENERATOR></HEAD>
<BODY>
<SCRIPT language=javascript>
// 隐藏被ID为objID的对象（层）遮挡的所有select
function HideOverSels(objID)
{
    var sels = document.getElementsByTagName('select');
    for (var i = 0; i < sels.length; i++)
      if (Obj1OverObj2(document.all[objID], sels[i]))
        sels[i].style.visibility = 'hidden';
          else
  sels[i].style.visibility = 'visible';
}
//判断obj1是否遮挡了obj2
function Obj1OverObj2(obj1, obj2)
{
  var pos1 = getPosition(obj1)
  var pos2 = getPosition(obj2)
  var result = true;
  var obj1Left = pos1.left - window.document.body.scrollLeft;
  var obj1Top = pos1.top - window.document.body.scrollTop;
  var obj1Right = obj1Left + obj1.offsetWidth;
  var obj1Bottom = obj1Top + obj1.offsetHeight;
  var obj2Left = pos2.left - window.document.body.scrollLeft;
  var obj2Top = pos2.top - window.document.body.scrollTop;
  var obj2Right = obj2Left + obj2.offsetWidth;
  var obj2Bottom = obj2Top + obj2.offsetHeight;

  if (obj1Right <= obj2Left || obj1Bottom <= obj2Top ||
      obj1Left >= obj2Right || obj1Top >= obj2Bottom)
    result = false;
  return result;
}
// 获取对象的坐标
function getPosition(Obj)
{
for (var sumTop=0,sumLeft=0;Obj!=window.document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft, Obj=Obj.offsetParent);
return {left:sumLeft,top:sumTop}
}
</SCRIPT><SCRIPT language=JavaScript>

</SCRIPT>
<SELECT name=""> <OPTION selected>test1</OPTION> <OPTION>test2</OPTION> <OPTION>test3</OPTION></SELECT>
<TABLE onmousemove="f_move(this);HideOverSels('t1')" onselectstart="return false" onmousedown=f_mdown(this) id=t1 style="LEFT: 50px; POSITION: absolute; TOP: 50px" width=200 border=1>
<TBODY>
<TR>
<TD style="CURSOR: move" align=middle bgColor=#cccccc>title1</TD></TR>
<TR>
<TD align=middle height=60>移到select上看看效果：）</TD></TR></TBODY></TABLE>
<TABLE onmousemove="f_move(this);HideOverSels('t2')" onselectstart="return false" onmousedown=f_mdown(this) id=t2 style="LEFT: 350px; POSITION: absolute; TOP: 250px" width=200 border=1>
<TBODY>
<TR>
<TD style="CURSOR: move" align=middle bgColor=#cccccc>title2</TD></TR>
<TR>
<TD align=middle height=60>content</TD></TR></TBODY></TABLE></BODY></HTML>
跟ttyp代码效果相类似的代码：<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
.backgroundIframe{
position:absolute;
z-index:-1;
width:100%;
height:100%;
top:0;left:0;
}
</style>
<script language=javascript>var simpleDrag_beginMoving=false;
var simpleDrag_header=null;function simpleDrag_Mousedown(mouseEvent,obj){
simpleDrag_beginMoving=true;
mouseEvent=mouseEvent||window.event;
simpleDrag_header=obj;
var theAlterableTable=simpleDrag_header.offsetParent;
simpleDrag_header.mouseDownX=theAlterableTable.offsetLeft-mouseEvent.clientX;
simpleDrag_header.mouseDownY=theAlterableTable.offsetTop-mouseEvent.clientY;
if(simpleDrag_header.setCapture)simpleDrag_header.setCapture();
else mouseEvent.preventDefault();
}
function simpleDrag_Mousemove(mouseEvent){
if(!simpleDrag_beginMoving) return ;
mouseEvent=mouseEvent||window.event;
var theAlterableTable=simpleDrag_header.offsetParent;
if(mouseEvent.clientX>1) //防止被移出页面之外，造成无法移回的后果
  theAlterableTable.style.left = simpleDrag_header.mouseDownX+mouseEvent.clientX;
if(mouseEvent.clientY>1)
  theAlterableTable.style.top = simpleDrag_header.mouseDownY+mouseEvent.clientY;
}
function simpleDrag_Mouseup(obj){
if(!simpleDrag_beginMoving) return ;
if(simpleDrag_header.releaseCapture)simpleDrag_header.releaseCapture();
simpleDrag_beginMoving=false;
}</script>
<script defer>
document.onmousemove=simpleDrag_Mousemove;
document.onmouseup=simpleDrag_Mouseup;
</script>
</head><body>
<div style="font-size:10pt;">
注1：本页面示例：简单拖动(Drag) <br/>

<br/>
注：本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。<br/>
注-----：作者JK：<a href="mailTo:[email protected]?subject=About%20SimpleDrag">[email protected]</a><br/>
<hr/>
</div>
<select><option>Select for Test</select>    <div style="position:absolute;top:50;left:50;width:200;background-color:#eeeeee;z-index:10;border:1px solid #777777;" >
  
  <div onmousedown="simpleDrag_Mousedown(event,this)" style="cursor:move;background-color:#cccccc;width:100%;" >header</div>
  <div style="background-color:#ffffff;">content</div>
</div>
<div style="position:absolute;top:40;left:40;width:200;background-color:#eeeeee;z-index:10;border:1px solid #777777;" >
  <iframe  class="backgroundIframe" frameborder=0 ></iframe>
  <div onmousedown="simpleDrag_Mousedown(event,this)" style="cursor:move;background-color:#cccccc;width:100%;" >header</div>
  <div style="background-color:#ffffff;">content</div>
</div></body>
</html>
另：楼主的问题，以下代码处理了body有scrollbar时出现的问题：<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
</head><body style="margin:0;"><select><option >test</option></select>
<input>
<a href=#>a</a>
<input type=button value="点击将页面灰掉" onclick="disableBodyArea();">
<br><br><br><br>
<br><br><br><br>
<select><option >test</option></select>
<br><br><br><br>
<br><br><br><br>
<select><option >test</option></select>
<br><br><br><br>
<br><br><br><br>
</body></html>
<script >function disableBodyArea(){
if(!document.all) return false;//For firefox etc.
window.topCoverDiv=document.createElement("<div style='z-index:100;position:absolute;top:expression(this.offsetParent.scrollTop);left:expression(this.offsetParent.scrollLeft);width:100%;height:100%;filter:alpha(opacity=20);background-color:#888888;' oncontextmenu='return false;'>");
topCoverDiv.innerHTML=" "
document.body.appendChild(topCoverDiv);
var allSelects=document.getElementsByTagName("select");
for(var i=0;i<allSelects.length;i++) {
allSelects[i].disabled=true;
allSelects[i].style.backgroundColor="#EEEEEE";
}
}</script>