Wednesday, March 21, 2012

ModalPopup and PopupControlExtender

I have a modalpopup panel which is used to change search variables for a db. One of the search fields is a date textbox. I have attached a popupcontrolextender to this textbox so that when clicked, a calendar pops up and the user can select the appropriate date. However, when I try this on the page, the calendar popup is actually UNDER the modal popup panel. I can barely see the last week of the month. Has anyone else had this issue? Is there a way to set up modalpopup or the popupcontrolextender to force the calendar to popup on top of the modal popup panel?

Here is my code for the modalpopup panel

<asp:Panel ID="modalPanel" runat="server" Height="0px" Width="0px" CssClass="modalPopup" style="display:none" BorderColor="Black" BorderStyle="Solid" BackImageUrl="~/images/backgrnd.gif">
<div class="modalPopup-text" style="font-weight: bold">
<table style="width: 661px">
<tr>
<td style="width: 100px; height: 21px;">
</td>
<td style="width: 100px; height: 21px;">
</td>
<td style="width: 100px; height: 21px;">
</td>
<td style="width: 100px; height: 21px;">
</td>
</tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td align="center" colspan="2">
Please Enter a Search Start Date</td>
<td align="center" colspan="2">
Please Enter a Search End Date</td>
</tr>
<tr>
<td align="center" colspan="2" style="height: 26px">
Start Date:
<asp:TextBox ID="StartDate" runat="server" Width="122px"></asp:TextBox></td>
<td align="center" colspan="2" style="height: 26px">
End Date:
<asp:TextBox ID="EndDate" runat="server" Width="121px"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td align="center" colspan="2">
Please Enter a Searh Start Time</td>
<td align="center" colspan="2">
Please Enter a Search End Date</td>
</tr>
<tr>
<td align="center" colspan="2">
Start Time:
<asp:TextBox id="StartTime" runat="server" style="width: 114px" ></asp:TextBox></td>
<td align="center" colspan="2">
End Time:
<asp:TextBox id="EndTime" runat="server" style="width: 107px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
<asp:RadioButtonList ID="StartRadio" runat="server">
<asp:ListItem>AM</asp:ListItem>
<asp:ListItem>PM</asp:ListItem>
</asp:RadioButtonList></td>
<td style="width: 100px">
</td>
<td style="width: 100px">
<asp:RadioButtonList ID="EndRadio" runat="server">
<asp:ListItem>AM</asp:ListItem>
<asp:ListItem>PM</asp:ListItem>
</asp:RadioButtonList></td>
</tr>
<tr>
<td align="center" colspan="4">
<asp:Button ID="execute" runat="server" Text="Search" OnClick="execute_Click" />
<asp:Button ID="cancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</div>
</asp:Panel>

Here is my code for the calendar popupcontrolextender

<asp:Panel ID="StartPopup" runat="server" Height="0px" Width="0px" CssClass="popupControl">
<asp:UpdatePanel ID="StartUpdate" runat="server">
<ContentTemplate>
<asp:Calendar ID="StartCalendar" runat="server" BackColor="White" BorderColor="#3366CC"
BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana"
Font-Size="8pt" ForeColor="#003399" Height="165px" Width="149px" OnSelectionChanged="StartCalendar_SelectionChanged" SelectedDate="2006-11-09">
<SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
<SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
<WeekendDayStyle BackColor="#CCCCFF" />
<OtherMonthDayStyle ForeColor="#999999" />
<NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
<DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
<TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True"
Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>

<ajaxToolkit:ModalPopupExtender ID="searchModal" runat="server" TargetControlID="modalOpen" BackgroundCssClass="modalBackground" CancelControlID="cancel" PopupControlID="modalPanel" DropShadow="true">
</ajaxToolkit:ModalPopupExtender>

<ajaxToolkit:PopupControlExtender ID="start" runat="server" TargetControlID="StartDate" PopupControlID="StartPopup" CommitProperty="value" Position="Bottom">
</ajaxToolkit:PopupControlExtender>

Thanks,

Luis

One thing I've done to make this work is put a DropShadowExtender on the Panel that you are popping up.

Try adding style="z-index:200000" to StartPopup as a workaround. (This brings it above the ModalPopup panel at z-index 100000.)

No comments:

Post a Comment