iframe遮盖住select(转载)

需求：

鼠标滑过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; 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; 200px; height:80px; z-index:-1;'></iframe>";

放了一个table。如果不加

<iframe style='position:absolute;top:0px;left:0px; 200px; height:80px; z-index:-1;'></iframe>

显示也是没有问题的，但是会被select遮住。

添 加iframe要注意。首先它的style必须是绝对定位：position:absolute，而且把它的top:0px;left:0px;这个意思 就是在div层中的左上角开始定位，200px; height:80px;这个高度和宽度要和div内部的table大小一致。z-index：-1，它很重要，就是iframe的要层叠在最下层。DIV的大小由内部放的iframe决定（table放在iframe上面），而iframe和table大小相同。

<td style="word-break:break-all"> -----td自动换行CSS

转自:http://hi.baidu.com/huahua035/blog/item/7e6757deb869391b632798be.html