div屏蔽页面，实现透明效果，怎么做

<html>
<head>
<style>
*{ margin:0; padding:0;}
body{ height:100%;}
.dis{ width:100%;  background: #cccccc; 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>
34344444444444444444444<br>
dsdddddddddddddddd<br>
<input type=button value="change" onclick=test()></body>
</html>
<script>
function test()
{
 var div = document.createElement("div");
 div.className="dis";
 document.getElementsByTagName("body")[0].appendChild(div);
}
</script>

解决方案 »

  1.   

    CutBug：你的代码，仍然没有屏蔽select，在你的代码中加上“<select name=""></select>”看看！
      

  2.   

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

  3.   

    <div id="menu" style="position:absolute; visibility:hidden; top:20px; left:20px; width:100px; height:200px; background-color:#6699cc;">
    <table>
    <tr><td>item 1</td></tr>
    <tr><td>item 2</td></tr>
    <tr><td>item 3</td></tr>
    <tr><td>item 4</td></tr>
    <tr><td>item 5</td></tr>
    </table>
    <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100px; height:200px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
    </div><a href="#" onclick="document.getElementById('menu').style.visibility='visible'">menu</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" onclick="document.getElementById('menu').style.visibility='hidden'">hide</a><form>
    <select><option>A form selection list</option></select>
    </form>
      

  4.   

    以上代码能让div置于select之上
      

  5.   

    可以了，把CutBug的style拷过来就好用了，还有一个问题，当这个层出现时，如何屏蔽右键，隐藏层时再恢复过来
      

  6.   

    屏蔽右键document.oncontextmenu=function(){return false}恢复document.oncontextmenu=function(){return true}
      

  7.   

    貌似有点困难，因为这个时候的oncontextmenu是在iframe上执行，而iframe没有该事件！
      

  8.   

    下面的代码是JK写的，测试可以：
    <script>
    function test()
    {
     var div = document.createElement("<div class='dis' oncontextmenu='return false;'>");
     var iframe = document.createElement("<iframe class='dis' style='z-index:98;'>");
     document.getElementsByTagName("body")[0].appendChild(iframe);
     document.getElementsByTagName("body")[0].appendChild(div);
    }
    </script>
      

  9.   

    关于遮蔽IFRAME的右键菜单，同时支持IE及Firefox的可以参考这个例子：
    http://blog.csdn.net/dh20156/archive/2006/11/14/1383424.aspx