<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>

解决方案 »

  1. 那就头疼医头,脚疼医脚,虽然恶劣点,呵呵。下把那个select给hidden,然后你再让他display呢?
      

  2. to bigman_lfj(盐水小鱼) 
    隐藏倒是可能解决,但客户那里不同意啊
      

  3. 如果一定要做到,那就把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="&nbsp;"
     document.body.appendChild(div);
     var allSelects=document.getElementsByTagName("select");
     for(var i=0;i<allSelects.length;i++)
     {
      allSelects[i].disabled=true;
     }
    }
    </script>
      

  4. 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>
      

  5. 要是可以修改select的样式就完美了
      

  6. to JK_10000(JK) 
    disabled只是灰掉,但是不遮住还是不行
      

  7. to ttyp(@http://www.cnblogs.com/ttyp/) 
    你的方法似乎不行
      

  8. <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="&nbsp;"
    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>
      

  9. 效果见
    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>
      

  10. 参考<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><!-- Code Begin -->
    <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>
    <!--
    var currentMoveObj = null;    //当前拖动对象
    var relLeft;    //鼠标按下位置相对对象位置
    var relTop;
    function f_mdown(obj)
    {
        currentMoveObj = obj;        //当对象被按下时,记录该对象
        currentMoveObj.style.position = "absolute";
        relLeft = event.x - currentMoveObj.style.pixelLeft;
        relTop = event.y - currentMoveObj.style.pixelTop;
    }
    window.document.onmouseup = function()
    {
        currentMoveObj = null;    //当鼠标释放时同时释放拖动对象
    }
    function f_move(obj)
    {
        if(currentMoveObj != null)
        {
            currentMoveObj.style.pixelLeft=event.x-relLeft;
            currentMoveObj.style.pixelTop=event.y-relTop;
        }
    }
    //-->
    </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><!-- Code Over --></BODY></HTML>
      

  11. 跟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:jk_10000@yahoo.com.cn?subject=About%20SimpleDrag">JK_10000@yahoo.com.cn</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;" >
      <!--iframe  class="backgroundIframe" scrolling="no" 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>
    <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>
      

  12. 另:楼主的问题,以下代码处理了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="&nbsp;"
    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>
      

类似问题 »