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";
    }


      

  • 相关阅读:
    [LeetCode]62. Excel Sheet Column Title Excel列序号
    [LeetCode]61. Excel Sheet Column Number Excel列序号
    [LeetCode]60. Rectangle Area矩形面积
    [LeetCode]59. H-Index H指数
    [LeetCode]58. Fraction to Recurring Decimal分数化小数
    [LeetCode]57. Binary Tree Inorder Traversal中序遍历二叉树
    Insert or Merge
    Root of AVL Tree
    是否同一棵二叉搜索树
    List Leaves
  • 原文地址:https://www.cnblogs.com/willpower/p/790114.html
Copyright © 2011-2022 走看看