层被Select控件盖住的问题

bachelor1001 2004-06-16 05:14:27
我写了一段html,要想把我的一个div显示在select上,却总是被select给盖住了。各位大侠,有办法解决这个问题吗?符代码如下
<html>
<script language="javascript">
function clickProcess(){
divHandle=document.getElementById('div');
if (divHandle.style.display=='none'){
divHandle.style.display='block';
}else{
divHandle.style.display='none';
}
}
</script>
<body>
输入选项:<input type="text"><input type="button" value="……" width=5 onclick="clickProcess()"><br>
<div name="div" id="div" style="position:absolute;display:none; background-color: rgb(223,71,177) ">
<table>
<tr>
<td>11111111111111</td>
</tr>
<tr>
<td>22222222222222</td>
</tr>
<tr>
<td>33333333333333</td>
</tr>
<tr>
<td>这是一个层,我想显示在select的上面</td>
</tr>
</table>
</div>
输入:<select name="" height=200 style="width:200;height:200"></select>
</body>

</html>
...全文
254 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
feijunjun 2004-06-17
  • 打赏
  • 举报
回复
哦~ 不用了, 我找到另外的方案了, 你拿去用吧

<html>
<script language="javascript">
function clickProcess(){
divHandle=document.getElementById('div');

if (divHandle.style.visibility=='hidden'){
divHandle.style.visibility='visible';
document.all.framemask.style.visibility = 'visible';
}else{
divHandle.style.visibility='hidden';
document.all.framemask.style.visibility = 'hidden';
}
}

function checkOverflow(divObj){
if(!divObj)return;

var l,t,r,b;
l = divObj.offsetLeft;
t = divObj.offsetTop;
r = l + divObj.offsetWidth;
b = t + divObj.offsetHeight;

var l1,t1,r1,b1;

var selectObjs = document.all.tags("SELECT")
for(var i = 0; i < selectObjs.length; i ++){
var obj = selectObjs[i];
l1 = obj.offsetLeft;
t1 = obj.offsetTop;
r1 = l1 + obj.offsetWidth;
b1 = t1 + obj.offsetHeight;
if(rectInRange(l,t,r,b,l1,t1,r1,b1)){

}
}
}

function rectInRange(l,t,r,b, l1, t1, r1, b1){
if((l1>=l)&&(t1>=t)&&(r1<=r)&&(b1<=b))
return 0;
if((l1<l)&&(t1<t)&&(r1>r)&&(b1>b))
return 1.;
return 2;
//返回值, 0完全盖住, 1没有盖住, 2,盖住一部份
}
</script>
<body>
输入选项:<input type="text"><input type="button" value="……" width=5 onclick="clickProcess()"><br>
<div name="div" id="div" style="position:absolute;z-index:100;width:300px;height:200px;visibility:hidden; background-color: rgb(223,71,177) ">
<table>
<tr>
<td>11111111111111</td>
</tr>
<tr>
<td>22222222222222</td>
</tr>
<tr>
<td>33333333333333</td>
</tr>
<tr>
<td>这是一个层,我想显示在select的上面</td>
</tr>
</table>
</div>
输入: <select name="" height=200 style="width:200;height:200"></select>
<select name="" height=200 style="position:absolute;left:200px;width:200;height:200"></select>
<iframe src="about:" frameborder=0 id=framemask style="position:absolute;visibility:hidden;width:300px;height:200px;left:expression(document.all('div').offsetLeft);top:expression(document.all('div').offsetTop);background-color:white;"></iframe>
</body>
</html>
feijunjun 2004-06-17
  • 打赏
  • 举报
回复
可以给你一个解决方案, 如果你不嫌麻烦的话, 我告诉你思路
在显示一个层的时侯, 先调用一个过程, 把所以这个层下的select控件全隐掉
那些被盖住一半的, 你可以在那个select外加一层span,把overflow设为hidden, 把宽度设为 要显示的层的最左坐标 - 这个被盖住一半的select的左坐标
daiyali123 2004-06-17
  • 打赏
  • 举报
回复
对··
用iframe
  • 打赏
  • 举报
回复
或者用iframe
  • 打赏
  • 举报
回复
出现问题:

1. 使用层制作的下拉菜单下正好有FLASH动画,菜单被动画遮挡.
2. 页面中的层浮动广告当经过FLASH动画时,浮动层从动画画穿过,实际显示被遮挡.

解决方法:

按如下任一方法设置设置FLASH对象的属性
<param name="wmode" value="transparent"> FLASH将透明
<param name="wmode" value="Opaque"> FLASH仍将保持不透明
feijunjun 2004-06-17
  • 打赏
  • 举报
回复
<html>
<script language="javascript">
function clickProcess(){
divHandle=document.getElementById('div');

if (divHandle.style.visibility=='hidden'){
divHandle.style.visibility='visible';
document.all.framemask.style.visibility = 'visible';
}else{
divHandle.style.visibility='hidden';
document.all.framemask.style.visibility = 'hidden';
}
}
</script>
<body>
输入选项:<input type="text"><input type="button" value="……" width=5 onclick="clickProcess()"><br>
<div name="div" id="div" style="position:absolute;z-index:100;width:300px;height:200px;visibility:hidden; background-color: rgb(223,71,177) ">
<table>
<tr>
<td>11111111111111</td>
</tr>
<tr>
<td>22222222222222</td>
</tr>
<tr>
<td>33333333333333</td>
</tr>
<tr>
<td>这是一个层,我想显示在select的上面</td>
</tr>
</table>
</div>
输入: <select name="" height=200 style="width:200;height:200"></select>
<select name="" height=200 style="position:absolute;left:200px;width:200;height:200"></select>
<iframe src="about:" frameborder=0 id=framemask style="position:absolute;visibility:hidden;width:300px;height:200px;left:expression(document.all('div').offsetLeft);top:expression(document.all('div').offsetTop);background-color:white;"></iframe>
</body>
</html>
possible_Y 2004-06-16
  • 打赏
  • 举报
回复
用iframe做载体,例子:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>简单菜单</title>
<!--
提供定位函数,用iframe作载体
-->
<style id=s>
#div1{
position:absolute;
z-index:100;
width:100;
height:130;
background-color:#d2e8ff;
border:1 solid black;
}
div{cursor:hand;font-size:12px;}
a{text-decoration:none;color:red;font-size:12px}
</style>
</head>
<body>
<script>
function window.onload(){
var shtml=div1.innerHTML;
var ifm=document.createElement("<iframe frameborder=0 marginheight=0 marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe>")
ifm.style.width=div1.offsetWidth
ifm.style.height=div1.offsetHeight
ifm.name=ifm.uniqueID
div1.innerHTML=""
div1.appendChild(ifm)
window.frames[ifm.name].document.write(s.outerHTML+"<body leftmargin=0 topmargin=0>"+shtml+"</body>")
}

function show(){
with(document.all.img1){
x=offsetLeft;
y=offsetTop;
objParent=offsetParent;
while(objParent.tagName.toUpperCase()!= "BODY"){
x+=objParent.offsetLeft;
y+=objParent.offsetTop;
objParent = objParent.offsetParent;
}
y+=offsetHeight-1
}
with(document.all.div1.style){
pixelLeft=x
pixelTop=y
visibility=''
}
}
function hide(){
document.all.div1.style.visibility='hidden'
}
</script>
<img id=img1 onmouseover="show()" onmouseout="hide()" src="ie.gif"><br/><select></select>
<div id=div1 onmouseover="style.visibility=''" onmouseout="style.visibility='hidden'" style="visibility:hidden;">
<div href="http://www.csdn.net" onmouseover="style.backgroundColor='highlight'" onmouseout="style.backgroundColor=''"

onclick="window.open(href)">中国程序员</div>
<div href="http://www.sohu.com" onmouseover="style.backgroundColor='highlight'" onmouseout="style.backgroundColor=''"

onclick="window.open(href)">sohu</div>
</div>
</body>
</html>
possible_Y 2004-06-16
  • 打赏
  • 举报
回复
也可以用一个iframe来实现
possible_Y 2004-06-16
  • 打赏
  • 举报
回复
用OBJECT试试:

<OBJECT id=aa style="display:none;z-index:1000; position:absolute; top:0; left:0; width:152; height: 200;" type="text/x-scriptlet" data="about:<body><div style='position:absolute;left:0;top:0;width:152;height:200;font:14;color:white;background:black;border:1 solid black'>test</div>"></OBJECT>
<select><option>hellohellohellohello</select><button onclick=aa.style.display=aa.style.display=="none"?"":"none">test</button>
rising201 2004-06-16
  • 打赏
  • 举报
回复
我也遇到过此问题,没有解决。期盼ing
bachelor1001 2004-06-16
  • 打赏
  • 举报
回复
感谢:smoothwood(吾谁与归) 的积极回复,但你办法,我试过了,不行
smoothwood 2004-06-16
  • 打赏
  • 举报
回复
style中加上z-index:10
取个大数字就不会被z-index小的数字挡住了

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧