none
网上下的一个JS日期控件问题 RRS feed

  • 问题

  • 问题描述:我在网上下载了一个用JS写得日期控件。现在在使用中发现:弹出的日期部分被页面上的其它控件挡住了,造成日期控件无法使用。不知道如何解决。请各位高手帮我想想解决方案。(注:JS的日期控件是由荷叶上的雨露开发的)。下面是相关代码(红色部分是使用日期控件的地方)。我在线等,问题比较棘手,客户在等着。麻烦大家了

    页面代码:
    <div class="Menubox">
                    <ul>
                        <li id="one1" onmouseover="setTab('one',1,2)" class="hover" style="width: 129px" onclick="DisplayHide('Contentbox');">
                            <asp:Label ID="lbl1" runat="server" Text="设置数据查询条件" Font-Size="small" ForeColor="#1F497D" />
                        </li>
                        <li id="one2" onmouseover="setTab('one',2,2)" style="width: 129px" onclick="DisplayHide('Contentbox');">
                            <asp:Label ID="lbl2" runat="server" Text="绩效说明" Font-Size="small" ForeColor="#1F497D" />
                        </li>
                        <li id="one3" style="width: 250px; text-align: left">
                            <asp:Label ID="lbl3" runat="server" Text="(提示:单击页签按钮可伸展或折叠)" Font-Size="small" ForeColor="#1F497D" />
                        </li>
                    </ul>
    </div>

    <div id="Contentbox" class="Contentbox" style="height: 180px; display: none">
                    <div id="con_one_1" class="hover">
                        <table style="margin: 0px 0px 0px 9px;">
                            <tr>
                                <td>
                                    <table>
                                        <tr>
                                            <td>
                                                <asp:Label ID="lblWlCode" runat="server" Font-Size="small" ForeColor="#1F497D" Text="物料编码:" />
                                            </td>
                                            <td style="padding-left: 5px">
                                                <asp:TextBox ID="txtWlCode" CssClass="textbox" onfocus="OverTextBox('txtWlCode');" onfocusout="OutTextBox('txtWlCode');" runat="server" Width="150px" />
                                            </td>
                                            <td style="padding-left: 20px">
                                                <asp:Label ID="lblInputDate" runat="server" Font-Size="small" ForeColor="#1F497D" Text="导入时间:" />
                                            </td>
                                            <td>
                                                <asp:TextBox ID="txtBeginDate" CssClass="textbox" runat="server" onFocus="setday(this)" contenteditable="false" Width="100px" /> - <asp:TextBox ID="txtEndDate" runat="server" CssClass="textbox" onFocus="setday(this)" contenteditable="false" Width="100px" />&nbsp;&nbsp;<asp:CompareValidator ID="cvTime" runat="server" Display="Dynamic" ErrorMessage="结束时间必须大于开始时间!" ControlToCompare="txtBeginDate" ControlToValidate="txtEndDate" Operator="GreaterThan" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="padding-top: 15px">
                                                <asp:Label ID="lblFactory" runat="server" ForeColor="#1F497D" Font-Size="small" Text="选择工厂:" />
                                            </td>
                                            <td colspan="3" style="padding-top: 15px">
                                                <asp:CheckBoxList ID="cblFactory" runat="server" RepeatDirection="Horizontal" BorderStyle="None" RepeatLayout="Flow" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="padding-top: 15px">
                                                <asp:Label ID="lblProduceMode" runat="server" ForeColor="#1F497D" Font-Size="small" Text="选择生产方式:" />
                                            </td>
                                            <td colspan="3" style="padding-top: 15px">
                                                <asp:CheckBoxList ID="cblProduceMode" runat="server" RepeatDirection="Horizontal" BorderStyle="None" RepeatLayout="Flow" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="4" style="padding-top: 15px; padding-left: 100px">
                                                <asp:Button ID="btnSearch" runat="server" Text="查询" OnClick="btnSearch_Click" CssClass="inp_L1" onMouseOver="this.className='inp_L2'" onMouseOut="this.className='inp_L1'" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <asp:Button ID="btnExport" runat="server" Text="导出Excel" OnClick="btnExport_Click" CssClass="inp_L1" onMouseOver="this.className='inp_L2'" onMouseOut="this.className='inp_L1'" CausesValidation="false" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <asp:Button ID="btnFefurbish" runat="server" Text="刷新" OnClick="btnFefurbish_Click" CssClass="inp_L1" onMouseOver="this.className='inp_L2'" onMouseOut="this.className='inp_L1'" CausesValidation="false" />
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td>
                                    <div id="picture" style="padding-left: 250px">
                                        <div style="padding-bottom: 5px">
                                            <asp:Label ID="state" runat="server" ForeColor="#1F497D" Font-Size="small" Text="图示状态说明:" />
                                        </div>
                                        <div style="padding-bottom: 3px">
                                            <img alt="" src="img/red.jpg" originalAttribute="src" originalPath="img/red.jpg" align="absmiddle" />&nbsp;&nbsp;<asp:Label ID="lblRed" ForeColor="#1F497D" Font-Size="small" runat="server" Text="超时未完成" />
                                        </div>
                                        <div style="padding-bottom: 3px">
                                            <img alt="" src="img/blue.jpg" originalAttribute="src" originalPath="img/blue.jpg" align="absmiddle" />&nbsp;&nbsp;<asp:Label ID="lblBlue" ForeColor="#1F497D" Font-Size="small" runat="server" Text="超时完成" />
                                        </div>
                                        <div style="padding-bottom: 3px">
                                            <img alt="" src="img/green.jpg" originalAttribute="src" originalPath="img/green.jpg" align="absmiddle" />&nbsp;&nbsp;<asp:Label ID="lblGreen" ForeColor="#1F497D" Font-Size="small" runat="server" Text="按时完成" />
                                        </div>
                                        <div>
                                            <img alt="" src="img/yellow.jpg" originalAttribute="src" originalPath="img/yellow.jpg" align="absmiddle" />&nbsp;&nbsp;<asp:Label ID="lblYellow" ForeColor="#1F497D" Font-Size="small" runat="server" Text="正在操作" />
                                        </div>
                                        <div>
                                            <img alt="" src="img/black.jpg" originalAttribute="src" originalPath="img/black.jpg" align="absmiddle" />&nbsp;&nbsp;<asp:Label ID="lblBlack" ForeColor="#1F497D" Font-Size="small" runat="server" Text="QDL数据收集中" />
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>

    CSS样式:
    a:link
    {
        color:#00F;
        text-decoration:none;
    }

    a:visited
    {
        color: #00F;
        text-decoration:none;
    }

    a:hover
    {
        color: #c00;
        text-decoration:underline;
    }

    ul
    {
        list-style:none;
    }

    /*选项卡1*/
    #Tab1
    {
        margin:0px;
        margin:0 auto;
        padding-left: 2px;
        padding-right: 2px
    }

    /*选项卡2*/
    #Tab2
    {
        width:576px;
        margin:0px;
        padding:0px;
        margin:0 auto;
    }

    /*菜单class*/
    .Menubox
    {
        width:100%;   
        height:28px;
        line-height:28px;
        background-color: #ffffff;
    }

    .Menubox ul
    {
        margin:0px;
        padding:0px;
    }

    .Menubox li
    {
        float:left;
        display:block;
        cursor:pointer;
        width:80px;
        text-align:center;
    }

    .Menubox li.hover
    {
        padding:0px;
        width:80px;
        border-left:1px solid #dcdcdc;
        border-top:1px solid #dcdcdc;
        border-right:1px solid #dcdcdc;
        height:27px;
        line-height:27px;
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=\"#B4D1FB\",endColorStr=\"#E3EDFD\",gradientType=\"0\"");
    }

    .Contentbox
    {
        clear:both;
        margin-top:0px;
        border:1px solid #A8C29F;
        text-align:left;
        padding-top:8px;
    }

    JS脚本:
    function setTab(name, cursel, n)
    {
        for (i = 1; i <= n; i++)
        {
            var menu = document.getElementById(name + i);
            var con = document.getElementById("con_" + name + "_" + i);
            menu.className = i == cursel ? "hover" : "";
            con.style.display = i == cursel ? "block" : "none";
        }
    }

    function DisplayHide(id)
    {
        var divContentbox=document.getElementById(id);
        if(divContentbox.style.display=="none")
        {
            divContentbox.style.display="block";
        }
        else
        {
            divContentbox.style.display="none";
        }
    }


    zy
    2009年3月11日 6:53

答案

全部回复

  • 设置日期控件的style="z-index:99999"
    或者在日期控件外面放一个<div style="z-index:99999">日期控件</div>

    孟宪会
    • 已标记为答案 张烨 2009年3月12日 2:11
    2009年3月11日 10:04
    版主
  • To:孟宪会:谢谢您的回复。按照你的提示已成功解决问题了。但有一点我不明白。在日期控件的JS代码里,已经在最外层设置了DIV的z-index属性为9998,为什么不行,一定要设置为99999才行?这个99999是怎么得出来的?z-index的机制是怎么样的?希望您能指导我下。谢谢先。
    zy
    2009年3月11日 22:11
  • z-index就像一个东西的叠放顺序,层最大的在最上面。你设置了9998,可能是别的内容设置了比它更大的数字,或者你js代码设置的方法不正确


    孟宪会
    2009年3月12日 0:49
    版主
  • 可以将这个JS控件放在一个DIV里面 然后在这个DIV的底层放一个IFRAME  假设这个DIV的Z-INDEX设置成100的话  IFRAME的就设置成99这样就可以了 
    /*html部分*/
    <div  
                            id="PopupDiv" 
                            style="position:absolute; top:0px; left:0px; width:800px; height:500px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">  
                           
                    </div>  
                    <iframe  
                            id="DivShim" 
                            src="javascript:false;"  originalAttribute="src" originalPath=""javascript:false;" "
                            scrolling="no" 
                            frameborder="0" 
                            style="position:absolute; top:0px; left:0px; display:none;">  
                    </iframe>  
    /*html部分*/

    /*js部分 具体实现自己结合一下*/
    function DivSetVisible(state)
                    {  
                            var DivRef = document.getElementById('PopupDiv');  
                            var IfrRef = document.getElementById('DivShim');  
                            if(state)  
                            {  
                                    DivRef.style.display = "block";  
                                    IfrRef.style.width = DivRef.offsetWidth;  
                                    IfrRef.style.height = DivRef.offsetHeight;  
                                    IfrRef.style.top = DivRef.style.top;  
                                    IfrRef.style.left = DivRef.style.left;  
                                    IfrRef.style.zIndex = DivRef.style.zIndex - 1;   //让iframe位于DIV下一层
                                    IfrRef.style.display = "block";  
                            }  
                            else 
                            {  
                                    DivRef.style.display = "none";  
                                    IfrRef.style.display = "none";  
                            }  
                    } 
    /*js部分 具体实现自己结合一下*/
    只要把JS日期控件放入popupdiv里就不会被任何控件遮挡了  呵呵

    liumi
    2009年3月19日 2:13