Datetime picker behind ModalPopupExtender
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:M开发者_开发技巧odalPopupExtender>
</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.
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
加载中,请稍侯......
精彩评论