`

解决DIV盖住select的方法

    博客分类：
  • JAVA
JavaScriptHTML 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Enve</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<meta content="MSHTML 6.00.3790.2541" name=GENERATOR>
<script>
function createEnvelopDiv(Div)
{
    var gap = 0;
    if(navigator&&navigator.userAgent.toLowerCase().indexOf("msie") == -1)
    {
        gap = 2;
    }

    var displayDiv = Div;
    if(typeof(displayDiv.envelopDiv) == "undefined")
    {
        // create a div to envelop
        var tEnvelopDiv = document.createElement("DIV");

        // define the envelopDiv's style
        tEnvelopDiv.style.left   = "-1000000";
        tEnvelopDiv.style.top    = "-1000000";
        tEnvelopDiv.style.width  = "0";
        tEnvelopDiv.style.height = "0";
        tEnvelopDiv.style.zIndex = 10000;

        // create a iframe
        var tEnvelopIframe = document.createElement("IFRAME");
        var tDate = new Date();
        var tEnvelopIframeId = "envelopiframe" + tDate.getTime();
        tEnvelopIframe.id = tEnvelopIframeId;
        tEnvelopIframe.name = tEnvelopIframeId;

        // define the iframe's style
        tEnvelopIframe.style.position = "absolute";
        tEnvelopIframe.style.left     = "-1000000";
        tEnvelopIframe.style.top      = "-1000000";
        tEnvelopIframe.style.zIndex   = tEnvelopDiv.style.zIndex-1;
        tEnvelopIframe.frameBorder    = "1";
        tEnvelopIframe.src            = "javascript:false;";

        tEnvelopDiv.appendChild(tEnvelopIframe);

        displayDiv.envelopDiv = tEnvelopDiv;
        displayDiv.envelopDiv.EnvelopIframeId = tEnvelopIframeId;

        displayDiv.parentNode.insertBefore(displayDiv.envelopDiv,displayDiv);

    }

    // get the iframe
    tEnvelopDivIframeId = displayDiv.envelopDiv.EnvelopIframeId;
    if(frames&&(frames[tEnvelopDivIframeId]&&frames[tEnvelopDivIframeId].frameElement))
    {
        tIframe=frames[tEnvelopDivIframeId].frameElement;
    }
    else
    {
        tIframe=document.getElementById(tEnvelopDivIframeId);
    }

    tIframe.style.left   = displayDiv.style.left;
    tIframe.style.top    = displayDiv.style.top;
    tIframe.style.width  = displayDiv.offsetWidth-2*gap+"px";
    tIframe.style.height = displayDiv.offsetHeight-2*gap+"px";
    tIframe.style.display = displayDiv.style.display;
    tIframe.style.visibility = displayDiv.style.visibility;
    displayDiv.style.zIndex = displayDiv.envelopDiv.style.zIndex+1;

    return false;
}
</script>
</head>
<body>
<select name="ddd" style="position:absolute;font-size:14px;top:196px;left:106px;">
    <option>select</option>
</select>
<div id="Div1" style="position:absolute;font-size:14px;top:126px;left:106px;width:210px;height:100px;background-color:red;border:green 2px solid">
盖不住select的Div1
</div>
<div id="Div2" style="position:absolute;font-size:14px;top:180px;left:160px;width:150px;height:50px;background-color:white;border:blue  1px solid">
盖住select的Div2<br />
&nbsp;&nbsp;3秒后左移并遮盖
</div>
<script>
t = document.getElementById("Div2");

setTimeout("test()", "3000");
function test()
{
    t.style.left = "140px";
    createEnvelopDiv(t);
}
</script>
</body>
</html>

 

 

  • 大小: 6.7 KB
分享到：
| D600可以关背光的MP3播放器，听MP3又同时 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    option挡住div解决方法

    Div下拉菜单被Select挡住的解决办法 下拉菜单 bbbbbbb ccccccc ccccccc ccccccc ccccccc test0 test1 ...Div被Select挡住，是一个比较常见的问题。...这个div就可以盖住select了. [Ctrl+A 全选 注:如需引入外部

    div总是被select遮挡的解决方法

    在实际应用中，除了上述方法外，还可以通过其他方式解决div被select遮挡的问题，例如： - 调整CSS的z-index属性，确保所有元素的层级关系正确无误。 - 使用JavaScript动态监测select的位置，并相应地调整div的位置...

    Div Select挡住的解决办法

    关键在于，虽然`Div`无法直接盖住`Select`，但是`Div`可以覆盖`Iframe`，而`Iframe`可以覆盖`Select`。因此，当`Div`扩展时，`Iframe`也随之扩展，有效地将`Div`的下拉菜单部分“推”到`Select`之上，解决了遮挡问题...

    层盖住下拉列表框问题解决方案

    在IE6中，由于其解析机制的问题，当一个div层和select下拉列表放置在同一页面上时，无论div层的z-index如何调整，它总是会被下拉列表覆盖。这种情况对于使用IE6浏览器的用户来说，会造成极大的不便。 为了解决这个...

    iFrame的妙用作为弹出层铺底覆盖

    大家如果做过那种黑色遮罩盖住整张页面，而碰巧用户用的是IE6，更碰巧的是页面上有select元素，那就有得头疼了（原理就不在这里赘述了）。我们会发现弹出的DIV没法遮住select, 轮到我们的iframe出场了。逻辑如下： ...

    网页中弹出小窗口,页面背景逐渐变为半透明.rar

    不在详细的说明代码了，帖出代码之前需要说明一点儿的是IE环境下，由于下拉框（select元素）优先级太高了，弹出的div元素无法盖住下拉框元素，很烦人的一个IE的BUG（个人认为是BUG　^o^），我使用的方法是在弹出时...

    javascript仿XP关机效果的弹出窗口功能

    不在详细的说明代码了，帖出代码之前需要说明一点儿的是IE环境下，由于下拉框（select元素）优先级太高了，弹出的div元素无法盖住下拉框元素，很烦人的一个IE的BUG（个人认为是BUG　^o^），我使用的方法是在弹出时...

Magicbox
Global site tag (gtag.js) - Google Analytics