把浮动窗口放到SELECT 元素上_select 浮动-优快云博客

本文链接：https://blog.youkuaiyun.com/njsjlx/article/details/2824861

本文介绍了一种解决SELECT元素覆盖浮动DIV的问题的方法，并提供了一个具体的JavaScript实现案例，通过添加一个空的iframe作为背景来确保浮动窗口始终处于顶层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

真是孤陋寡闻了，搞个javascript会有这么多问题，新手就是新手啊
满以为原来做的那个浮动窗口很不错了，几乎没有什么多余的代码
而且，在IE和FireFox上测试没有任何错误。但把这个东西放到实际的应用场景里就傻了，
SELECT元素总是覆盖浮动DIV。让我极度郁闷，还有有发达的网络，让我明白怎么回事鸟。
如今原来那段代码改成以下的代码了。

恩，这下OK了，放个空的frame做背景跟着拖动，HOHO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>test sWin</title>

    <script type="text/javascript">
    function inittitle(frame,odiv,title)
    {
        title.onmousedown=function(e) {
            if (e==null) e=window.event;
            var x=e.layerX?e.layerX:e.offsetX;
            var y=e.layerY?e.layerY:e.offsetY;

            if(title.setCapture) { // for ie brower
                title.setCapture();
                document.onmousemove=function(e) {
                    if (e==null) e=window.event;
                    if (!e.pageX) e.pageX=e.clientX;
                    if (!e.pageY) e.pageY=e.clientY;
                    var tx=e.pageX-x;
                    var ty=e.pageY-y;

                    odiv.style.left=tx + "px";
                    odiv.style.top=ty + "px";
                    frame.style.left = odiv.style.left;
                    frame.style.top = odiv.style.top;
                };
                document.onmouseup=function(){
                    title.releaseCapture();
                    document.onmousemove=null;
                    document.onmouseup=null;
                };
            } else if(document.addEventListener)
            {
                function mousemove(e) {
                    if (e==null) e=window.event;
                    if (!e.pageX) e.pageX=e.clientX;
                    if (!e.pageY) e.pageY=e.clientY;
                    var tx=e.pageX-x;
                    var ty=e.pageY-y;

                    odiv.style.left=tx + "px";
                    odiv.style.top=ty + "px";
                    frame.style.left = odiv.style.left;
                    frame.style.top = odiv.style.top;
                };
                function mouseup(e) {
                    document.removeEventListener("mousemove",mousemove, false);
                    document.removeEventListener("mouseup",mouseup,false);
                };

                document.addEventListener("mousemove",mousemove, false);
                document.addEventListener("mouseup", mouseup, false);
            }
        };
    }

    function initclose(frame,odiv,close)
    {
        close.onmouseout=function(e)
        {
            var css = "text-decoration:none; font-size:13px; "
                    + "font-weight:bold; color:#ffffff";
            close.style.cssText = css;
        };
        close.onmouseover=function(e)
        {
            var css = "text-decoration:none; font-size:13px; "
                    + "font-weight:bold; background-color:#FFD0F0";
            close.style.cssText = css;
        };
        close.onmousedown=function(e)
        {
            ;
        }
        close.onclick=function(e)
        {
            odiv.style.display="none";
            frame.style.display="none";
        }
    }

    function closeswin(){}

    function donothing(){}

    function sWin()
    {
        var csst= "position:absolute; "
                + "border:2px solid #0040A0; "
                + "left:10px; top:10px; "
                + "width:322px; height:280px; "
                + "z-index:10000";
        var cssf= "position:absolute; "
                + "left:10px; top:10px; "
                + "width:322px; height:280px; "
                + "386px;z-index:9000; ";
        var cssf2= "position:absolute; "
                + "left:10px; top:10px; "
                + "width:326px; height:284px; "
                + "386px;z-index:9000; ";

        var css1= "height:18px; "
                + "background-color:#0040A0; ";
        var css2 = "height:262px; background-color:#FFFFFF; ";

        var d1 = document.createElement("div");
        var d2 = document.createElement("div");
        var odiv = document.createElement("div");
        var frame = document.createElement("iframe");

        frame.src = "javascript:return false;";
        frame.frameborder="0";
        frame.scrolling = "no";


        odiv.appendChild(d1);
        odiv.appendChild(d2);
        document.body.appendChild(odiv);
        document.body.appendChild(frame);

        odiv.style.cssText = csst;
        frame.style.cssText = cssf;
        d1.style.cssText = css1;
        d2.style.cssText = css2;

        if (d1.setCapture) frame.style.cssText = cssf2;

        d1.innerHTML="<table border=/"0/" width=/"100%/" cellpadding=/"0/" cellspacing=/"0/">"
                    +"<tr><td style=/"color:#ffffff; font-size:13px; font-weight:bold;"
                    +"padding-left:2px; width:500px; cursor:default;/" "
                    +"id=/"sWin_title/" valign=/"top/">WINDOWS风格DIV浮动窗口...</td>"
                    +"<td align=/"center/" onmousedown=/"javascript:donothing();/">"
                    +"<a href=/"javascript:closeswin();/" id=/"sWin_close/" "
                    +"style=/"text-decoration:none; font-size:13px; "
                    +"font-weight:bold; color:#ffffff/">×</td></tr></table>";

        var title = document.getElementById("sWin_title");
        var close = document.getElementById("sWin_close");

        inittitle(frame,odiv,title);
        initclose(frame,odiv,close);

        this.client = d2;
    }

    var win1;
    window.onload = function(){ win1=sWin();}
    </script>
</head>
<body>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <select id="Select1" style="width: 325px">
        <option selected="selected">Red</option>
        <option>Gray</option>
        <option>Green</option>
        <option>Yellow</option>
        <option>Black</option>
        <option>White</option>
        <option>Pink</option>
        <option>Blue</option>
        <option></option>
    </select>

</body>
</html>