彻底解决IFRAME挡住层(DIV)

昨天在项目中发现IFRAME挡住层(DIV),一个页面有4个IFRAME,IFRAME页面中跟随鼠标的层
在IFRAME边缘总是被其他IFRAME挡住,郁闷了好久,在网上也找了好多资料,都没能很好解决.

用window.createPopup()也不行,因为父页面框架中有定时器刷新,不过window.createPopup()创建
弹出页面我个人觉得比DIV要强,不用自己控制什么时候关闭:
function showInfo1(unit,day, revenue)
{
    var content = "<table border='1' cellpadding='3' style='font-size:10pt; " +
       "font-family:verdana; background-color:#CCCCFF' width='230'>";
    content += "<tr><td width='80'><b>单位</b></td><td >" + unit + "</td></tr>";
    content += "<tr><td width='80'><b>日期</b></td><td >" + day + "</td></tr>";
    content += "<tr><td width='80'><b>抄表数</b></td><td>" + revenue + "</td></tr>";
    content += "<tr><td width='80'><b>例日应抄数</b></td><td>" + (parseInt(revenue)+ 1000)+ "</td></tr>";
    content += "<tr><td width='80'><b>按期抄表率</b></td><td>" + Math.round(parseInt(revenue*100)/ (parseInt(revenue)+ 1000)) + "%</td></tr>";
    content += "<tr><td colspan='2'><b>抄表相关考核:</b></td></tr>";
    content += "<tr><td colspan='2'>1)<a href='/quality/OnTimeCopyRateAction.action'>按期抄表率分析</a></td></tr>";
    content += "</table>";

 var oPopup = window.createPopup();
 var oPopupBody = oPopup.document.body;
 //oPopupBody.style.backgroundColor = "magenta";
 //oPopupBody.style.border = "solid blue 3px";
 oPopupBody.innerHTML = content;
 oPopup.show(window.event.x, window.event.y, 300, 200, document.body);
}

晚上想到了一个好办法,把原来在IFRAME中的DIV放到它的父页面,这样在IFRAME中弹出父页IFRAME面
的DIV就不会被其他IFRAME挡住了
父页面:<div id="detailInfo"  style="position:absolute;overflow:auto;overflow-x:auto;z-index:1;"></div>
IFRAME中:<img onclick='showInfo(null);'onmouseover='showInfo(\"{dataSetName}\",\"{xLabel}\", {value});'>
function showInfo(unit,day, revenue)
{
    var obj;
    if (document.getElementById)
        //IE 5.x or NS 6.x or above
        obj = parent.document.getElementById('detailInfo');
    else
        //IE 4.x
        obj = parent.document.all['detailInfo'];
    if (unit==null)
    {
        obj.style.visibility = "hidden";
        return;
    }

    var content = "<table border='1' cellpadding='3' style='font-size:10pt; " +
       "font-family:verdana; background-color:#CCCCFF' width='230'>";
    content += "<tr><td width='80'><b>单位</b></td><td >" + unit + "</td></tr>";
    content += "<tr><td width='80'><b>日期</b></td><td >" + day + "</td></tr>";
    content += "<tr><td width='80'><b>抄表数</b></td><td>" + revenue + "</td></tr>";
    content += "<tr><td width='80'><b>例日应抄数</b></td><td>" + (parseInt(revenue)+ 1000)+ "</td></tr>";
    content += "<tr><td width='80'><b>按期抄表率</b></td><td>" + Math.round(parseInt(revenue*100)/ (parseInt(revenue)+ 1000)) + "%</td></tr>";
    content += "<tr><td colspan='2'><b>抄表相关考核:</b></td></tr>";
    content += "<tr><td colspan='2'>1)<a href='/quality/OnTimeCopyRateAction.action'>按期抄表率分析</a></td></tr>";
    content += "</table>";

 obj.style.left=(window.event.x).toString()+'px';
 obj.style.top=(window.event.y).toString()+'px';
    obj.innerHTML = content;
    obj.style.visibility = "visible";
}


  

原文地址:https://www.cnblogs.com/willpower/p/790114.html