下拉框遮挡住层的问题(ie的bug),寻求一个比较好的解决方式

下拉框遮挡住层的问题(ie的bug),寻求一个比较好的解决方式 [已结贴,结贴人:mlw2000]

加为好友

发送私信

在线聊天

mlw2000
等级:

发表于：2008-07-05 15:28:25 楼主

我明白可以使用办法有：1>把下拉列表disable掉2>display='none'
但这两种办法都无法满足，具体看下面的例子

HTML code


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> test </title>
  <style type="text/css">
  #main{position:relative;z-index:1; width:300px;height:300px}
  #cover{position:absolute;left:0px;top:0;z-index:2;width:100%;background:black;height:100%;    filter:alpha(opacity=40);opacity:0.5; text-align=center;color:red;vertical-align:middle;}
  </style>
 </head>

 <script language="JavaScript">
 var COVER=null;
window.alert = function (msg){    
    if(COVER==null){
    var parentElement = document.createElement("div");
    parentElement.innerHTML = "<div></div>";
    var element = parentElement.firstChild || null;
    element.setAttribute("id","cover");
    
    var body = document.getElementsByTagName('BODY').item(0); 
    body.appendChild(parentElement);
    COVER = document.getElementById("cover");
    }
    
    COVER.innerHTML=msg+"<br><input type='button' value='确认' onclick='hide()'>";
    COVER.style.display='';
}

function hide(){
    COVER.style.display='none';
}

 </script>
 <body >

<div id="main">
<form method=post action="" name="form1">    
    <input type="radio" name="1" checked="true">单选框无问题
    <input type="radio" name="">单选框无问题<br>
    <textarea name="" rows="" cols="">文本域无问题</textarea><br>
    <input type="checkbox" name="">复选框无问题<br>
    <select name="select1">
        <option value="1" selected >11</option>
        <option value="3" >22</option>
    </select>
    <input type="button" value="click here" onclick="alert('数据格式错误')">
</form>
</div>

 </body>
</html>

问题点数：40 回复次数：10 修改删除举报引用回复

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>全屏</title> <style type="text/css"> #Dall_screen, #Iall_screen { position:absolute; left:0px; top:0px; } #Dall_screen { z-index:100; background-color:gray; filter:alpha(opacity=50); opacity:0.5; } #Iall_screen { z-index:99; filter:alpha(opacity=50); opacity:0.5; } </style> <script type="text/javascript"> var $ = function (id) { //获取对象 return document.getElementById(id); }; var all_screen = function () { var div, iframe; document.body.innerHTML += '<div id="Dall_screen"> <\/div><iframe id="Iall_screen" frameborder="0"><\/iframe>'; div = $("Dall_screen"), iframe = $("Iall_screen"); iframe.allowTransparency = true; //$("o").disabled = false; div.style.height = iframe.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"; div.style.width = iframe.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px"; }; </script> </head> <body> 控制这个下拉框的般透明度<select id="o"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select><br> <input type="button" value="添加" onclick="all_screen()" /> </body> </html>