需求:
鼠标滑过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>
//获得绝对顶边距 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