ModalPopupExtender 背后的日期时间选择器

发布于 2024-11-25 20:37:47 字数 2595 浏览 1 评论 0原文

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

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

问题是日期时间控件在我的modalpopup后面弹出，所以大部分控件不可见。

这是一个简单的测试项目，显示了问题：

<%@ 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，但仍然无法让它正常工作。

提前致谢。

原文

I am using a 3rd party datetime picker on an asp.net page.
Here is a link to the control:

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

The problem is that the datetime control pops up behind my modalpopup so most of the control is not visible.

Here is a simple test project that exibits the 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>

This has been driving me nuts for a couple days now. I have played around with the z-index, but I still can't get it to work properly.

Thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱本泡沫多脆弱 2024-12-02 20:37:47

以下代码适用于 jQuery UI 日期选择器。

    $(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

The following code works for 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(); } });

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

回复收藏 0 原文

~没有更多了~