zoukankan      html  css  js  c++  java
  • 彻底解决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";
    }


      

  • 相关阅读:
    第六节:流上下文
    第五节:控制序列化和反序列化的数据
    第四节:格式化器如何序列化类型实例
    第三节:控制序列化和反序列化
    第二节:使类型可序列化
    第一节:序列化和反序列化快速入门
    第五节:使用反射发现类型成员
    golang 一些坑 rang
    golang json格式字符串反序列化映射到切片结构体
    golang 结构体内嵌结构体序列化填充
  • 原文地址:https://www.cnblogs.com/willpower/p/790114.html
Copyright © 2011-2022 走看看