把浮动窗口放到SELECT 元素上

本文介绍了一种解决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>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值