none
請問如何設定jquery的datepicker的zindex RRS feed

  • 問題

  • 各位大大您好,在網頁上有兩個textbox 跟兩個div,我在textbox使用jquery的datepicker,但是因為div的設定,所以textbox的datepicker會被第一個div給蓋掉,第一個div的zindex為10,但是第二個div不會,第二個div的zindex為1,請問如何設定textbox的datepicker的zindex?

    設計如下:

    <script>
    ...
    var DivHR = document.getElementById('DivHeaderRow');
    var DivMC = document.getElementById('DivMainContent');
    
    DivMC.style.overflowY = 'scroll';
    
     //*** Set divheaderRow Properties ****
    ...
    DivHR.style.position = 'relative';
    DivHR.style.zIndex = '10';
    
     //*** Set divMainContent Properties ****
    ...
     DivMC.style.position = 'relative';
     DivMC.style.zIndex = '1';
    ...
    $(function () {
    $("#<%= TBDateStart.ClientID %>").datepicker();
    $("#<%= TBDateEnd.ClientID %>").datepicker();});
    </script>
    
    <asp:TextBox ID="TBDateStart" runat="server" MaxLength="10" Width="110px" ></asp:TextBox>
    <asp:TextBox ID="TBDateEnd" runat="server" MaxLength="10" Width="110px"></asp:TextBox>
    
    
    <div style="overflow: hidden;" id="DivHeaderRow">
    </div>
    <div style="overflow: auto;" onscroll="OnScrollDiv(this)" id="DivMainContent">
    ...
    </div>
    
    請問如何透過script的設定改變textbox的datepicker的zindex 來蓋過DivHeaderRow這個zindex設為10的div,謝謝各位大大!

    2018年1月8日 上午 03:36

解答

    • 已標示為解答 Eden Knight 2018年1月8日 上午 06:24
    2018年1月8日 上午 03:40
  • 已解決,程式碼如下,謝謝tihs大大。 

    <script>
    ...
    var DivHR = document.getElementById('DivHeaderRow');
    var DivMC = document.getElementById('DivMainContent');
    
    DivMC.style.overflowY = 'scroll';
    
     //*** Set divheaderRow Properties ****
    ...
    DivHR.style.position = 'relative';
    DivHR.style.zIndex = '10';
    
     //*** Set divMainContent Properties ****
    ...
     DivMC.style.position = 'relative';
     DivMC.style.zIndex = '1';
    ...
    $(function () {
                   $("#<%= TBDateStart.ClientID %>").datepicker({
                       //comment the beforeShow handler if you want to see the ugly overlay
                       beforeShow: function () {
                           setTimeout(function () {
                               $('.ui-datepicker').css('z-index', 99999999999999);
                           }, 0);
                       }
                   });
                   $("#<%= TBDateEnd.ClientID %>").datepicker({
                       //comment the beforeShow handler if you want to see the ugly overlay
                       beforeShow: function () {
                           setTimeout(function () {
                               $('.ui-datepicker').css('z-index', 99999999999999);
                           }, 0);
                       }
                   });
               });
    </script>
    
    <asp:TextBox ID="TBDateStart" runat="server" MaxLength="10" Width="110px" ></asp:TextBox>
    <asp:TextBox ID="TBDateEnd" runat="server" MaxLength="10" Width="110px"></asp:TextBox>
    
    
    <div style="overflow: hidden;" id="DivHeaderRow">
    </div>
    <div style="overflow: auto;" onscroll="OnScrollDiv(this)" id="DivMainContent">
    ...
    </div>

    • 已標示為解答 Eden Knight 2018年3月9日 上午 02:12
    2018年1月8日 上午 06:29

所有回覆

    • 已標示為解答 Eden Knight 2018年1月8日 上午 06:24
    2018年1月8日 上午 03:40
  • 已解決,程式碼如下,謝謝tihs大大。 

    <script>
    ...
    var DivHR = document.getElementById('DivHeaderRow');
    var DivMC = document.getElementById('DivMainContent');
    
    DivMC.style.overflowY = 'scroll';
    
     //*** Set divheaderRow Properties ****
    ...
    DivHR.style.position = 'relative';
    DivHR.style.zIndex = '10';
    
     //*** Set divMainContent Properties ****
    ...
     DivMC.style.position = 'relative';
     DivMC.style.zIndex = '1';
    ...
    $(function () {
                   $("#<%= TBDateStart.ClientID %>").datepicker({
                       //comment the beforeShow handler if you want to see the ugly overlay
                       beforeShow: function () {
                           setTimeout(function () {
                               $('.ui-datepicker').css('z-index', 99999999999999);
                           }, 0);
                       }
                   });
                   $("#<%= TBDateEnd.ClientID %>").datepicker({
                       //comment the beforeShow handler if you want to see the ugly overlay
                       beforeShow: function () {
                           setTimeout(function () {
                               $('.ui-datepicker').css('z-index', 99999999999999);
                           }, 0);
                       }
                   });
               });
    </script>
    
    <asp:TextBox ID="TBDateStart" runat="server" MaxLength="10" Width="110px" ></asp:TextBox>
    <asp:TextBox ID="TBDateEnd" runat="server" MaxLength="10" Width="110px"></asp:TextBox>
    
    
    <div style="overflow: hidden;" id="DivHeaderRow">
    </div>
    <div style="overflow: auto;" onscroll="OnScrollDiv(this)" id="DivMainContent">
    ...
    </div>

    • 已標示為解答 Eden Knight 2018年3月9日 上午 02:12
    2018年1月8日 上午 06:29