iframe遮盖住select(转载)
2010-11-23 10:53 爱研究源码的javaer 阅读(1295) 评论(0) 编辑 收藏 举报需求：
鼠标滑过text文本框时，弹出提示信息DIV。
问题：
弹出的DIV层被Select下拉框遮住。
解决方案：
弹出的DIV层内部嵌套iframe，信息在iframe内部显示（可以是iframe内的table或者是div）
代码：
页面代码：
<div id="name_show" style="display:none;position:absolute"></div>
。。。。。。。
<html:text' property="DV_ASSET/TITLE_NAME" name="DV_ASSET/TITLE_NAME" readonly="true"
onmouseover="show_name(this,'DV_ASSET/TITLE_NAME');" onmouseout="hiddname()">
</html:text>
JS代码
//获得绝对顶边距
function getTop(e){
var ost = e.offsetTop;
while(e=e.offsetParent){
ost += e.offsetTop;
}
return ost;
}
//获得绝对左边距
function getLeft(e){
var osl = e.offsetLeft;
while(e=e.offsetParent){
osl += e.offsetLeft;
}
return osl;
}
// 泡泡提示信息 (弹出---消失)
function show_name(obj,name){
var show_value=document.getElementsByName(name)[0].value;
var x= parseInt(getLeft(obj));
var y=obj.offsetHeight + parseInt(getTop(obj));
if(show_value.length>11){ //只要字符串大于11就用泡泡信息提示
var divObj =document.getElementById('name_show');
// var x = event.clientX;
//var y = event.clientY;
divObj.style.left= x+"px";
divObj.style.top= y+"px";
divObj.innerHTML="<table bgcolor=#63B8FF border=1 width='200px' height='80px'><tr><td style='word-break:break-all'>"+show_value+"</td></tr></table><iframe style='position:absolute;top:0px;left:0px; width:200px; height:80px; z-index:-1;'></iframe>";
divObj.style.display='block';
}
}
function hiddname(){
document.getElementById('name_show').style.display='none';
}
备注：
从上面的demo可以看出，弹出的DIV中
<table bgcolor=#63B8FF border=1 width='200px' height='80px'><tr><td style='word-break:break-all'>"+show_value+"</td></tr></table><iframe style='position:absolute;top:0px;left:0px; width:200px; height:80px; z-index:-1;'></iframe>";
放了一个table。如果不加
<iframe style='position:absolute;top:0px;left:0px; width:200px; height:80px; z-index:-1;'></iframe>
显示也是没有问题的，但是会被select遮住。
添 加iframe要注意。首先它的style必须是绝对定位：position:absolute，而且把它的top:0px;left:0px;这个意思 就是在div层中的左上角开始定位，width:200px; height:80px;这个高度和宽度要和div内部的table大小一致。z-index：-1，它很重要，就是iframe的要层叠在最下层。DIV的大小由内部放的iframe决定（table放在iframe上面），而iframe和table大小相同。
<td style="word-break:break-all"> -----td自动换行CSS
