Question

我在asp.net页面上使用第三方日期时间选择器。这是控件的链接：

http://markbeaton.com/SoftwareInfo.aspx?ID=868292da-e93e-4e85-b455-41263ed15cd5

问题是我的modalpopup后面会弹出datetime控件，因此大部分控件都不可见。

这是一个简单的测试项目，它展示了issus：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
 <%@ Register Assembly="Mark.Web.UI.WebControls.DateTimePicker" Namespace="Mark.Web.UI.WebControls" agPrefix="cc1" %>

<!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">
 <body>
     <form id="form1" runat="server">
      <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
     <div>
         <asp:LinkButton ID="LinkButtonDummy" runat="server">LinkButton</asp:LinkButton>
         <asp:Panel ID="Panel1" runat="server" Width="576px" Height="125px" style="background-   color:Gray; " >
             Date: <cc1:DateTimePicker ID="DateTimePicker_StartDate" runat="server"          ShowClearButton="true" UseImageButtons="true" PickerCssClass="Picker" ShowTimePicker="true" Width="250" />
         </asp:Panel>
             <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1" TargetControlID="LinkButtonDummy">
         </asp:ModalPopupExtender>
     </div>
     </form>
 </body>
 </html>

的web.config

<?xml version="1.0"?>
 <configuration>
  <appSettings/>
  <connectionStrings/>
  <system.web>

    <httpHandlers>
       <add verb="GET" path="/JavascriptDateTimeFormat.axd" 
               type="Mark.Web.UI.JavascriptDateTimeFormat, Mark.Web.UI.WebControls.DateTimePicker"/>
     </httpHandlers>

    <pages>
       <controls>
         <add tagPrefix="mark" assembly="Mark.Web.UI.WebControls.DateTimePicker" namespace="Mark.Web.UI.WebControls"/>
       </controls>
     </pages>

  <compilation debug="true" targetFramework="4.0"></compilation>
   <authentication mode="Windows"/>
   </system.web>
 </configuration>

这让我疯了好几天了。我玩过z-index，但我还是无法让它正常工作。

提前致谢。

Answer 1

以下代码适用于jQuery UI datepicker。

    $(document).ready(function() {
$.maxZIndex = $.fn.maxZIndex = function(opt) {
    /// <summary>
    /// Returns the max zOrder in the document (no parameter)
    /// Sets max zOrder by passing a non-zero number
    /// which gets added to the highest zOrder.
    /// </summary>    
    /// <param name="opt" type="object">
    /// inc: increment value, 
    /// group: selector for zIndex elements to find max for
    /// </param>
    /// <returns type="jQuery" />
    var def = { inc: 10, group: "*" };
    $.extend(def, opt);    
    var zmax = 0;
    $(def.group).each(function() {
        var cur = parseInt($(this).css('z-index'));
        zmax = cur > zmax ? cur : zmax;
    });
    if (!this.jquery)
        return zmax;

    return this.each(function() {
        zmax += def.inc;
        $(this).css("z-index", zmax);
    });
}

}）;

$（“＃qText1”）。datepicker（{beforeShow：function（）{$（'＃ui-datepicker-div'）。maxZIndex（）;}}）;

来源： http://www.west-wind.com/weblog/posts/2009/Aug/31/Getting-and-setting-max-zIndex-with-jQuery

ModalPopupExtender背后的日期时间选择器

1 个答案: