当层遇到下拉框时

原创 于 2005-01-08 00:54:00 发布
· 1.3k 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #iframe #applet #ie #border #object

在IE环境下，层遇到下拉框时总会出现层被下拉框所挡住的情形，这是怎么回事呢？这是IE的一个bug(其它浏览器没有这个问题)，下拉框是个web control，其优先级很高，一般的控件无法在其上方，为解决此问题，总结了以下几种常用方法：
隐藏下拉框（最常用方法）
以下是代码片段：
<!--StartFragment--><script language="JavaScript">
<!--
/*
 *    要显示某个层时调用HideElements(oDiv)
 *    隐藏某个层时调用ShowElements()
 */
/*
 * 隐藏下拉框函数
 */
function HideElements(el) 
{
    if (!window.__temp__) window.__temp__ = new Array();
    var o = ["select","iframe","applet","object"];
    for (var i=0; i<o.length; i++) 
    {
        var elms = document.getElementsByTagName(o[i]);
        for (var j=0; j<elms.length; j++) 
        {
            var p = getPosition(elms[j]);
            var e = getPosition(el);
            if (e.left + e.width > p.left && e.left < p.left + p.width &&
                e.top + e.height > p.top && e.top < p.top + p.height) 
            {
                window.__temp__[j] = elms[j];
                elms[j].style.visibility = "hidden";
            }
        }
    }
    function getPosition(el) 
    {
        var e = el.offsetParent, x = el.offsetLeft, y = el.offsetTop;
        while (e.tagName != 'BODY') 
        {
            x += e.offsetLeft;
            y += e.offsetTop;
            e = e.offsetParent;
        }
        return {
            "left":        x,
            "top":        y,
            "width":    el.offsetWidth,
            "height":    el.offsetHeight
        }
    };
};
/*
 * 显示下拉框
 */
function ShowElements() 
{
    var t = window.__temp__;
    if (t) {
        for (var i=0; i<t.length; i++) 
        {
            t[i].style.visibility = "visible";
        }
    }
};    

//-->
</script>    
用iframe为载体（实用）
以下是代码片段：
<!--StartFragment--><div οnclick="show()">onclick test</div>
<div id="demo" style="position:absolute;width:100;height:100;z-index:9999;visibility:hidden"></div>
<select style="width:150px"><option>see me ?</option></select>
<script language="JavaScript">
<!--
var i=0;
var ie = document.all ? 1 : 0;
var o = document.getElementById("demo");
var w = o.offsetWidth;
var h = o.offsetHeight;
if (ie)
    o.innerHTML = '<iframe name="WebFrame" frameborder=0 width="' + w + 
                 '" height="' + h + '" marginwidth=0 marginheight=0></iframe>';
function show() 
{
    var str = '<div style="border:1px solid;width:' + w + 'px;height=' + h + 'px">hello</div>'
    if (ie) {
        var doc = window.frames["WebFrame"].document;
        doc.open();
        doc.write('<html><head></head><body>' + str + '</body></html>');
        doc.close();
    } else {
        o.innerHTML = str;
    }
    o.style.visibility = ++i%2 ? 'visible' : 'hidden';
};
//-->
</script>
popup方法（需IE5.5+）
以下是代码片段：

<!--StartFragment--><script language="JavaScript">
<!--
var oPopup = window.createPopup();
oPopup.document.body.innerHTML = 'New Window';
oPopup.show(100, 100, 200, 200, oPopup.document);
/*
 * window.createPopup产生的窗口可以跨载框架，更不用说下拉框了，但其使用有一定的限制，并不推荐使用
 */
//-->
</script>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值