Wednesday, March 21, 2012

modalpopup - screen in back isnt being disabled

Can someone tell me what is wrong with my code below. when modalpop screen comes up, the screen in the back isn't being disabled. Plz help

<asp:Table ID="TableAdd" runat="server" Width="568px">
<asp:TableRow ID="TableRow90" runat="server">
<asp:TableCell ID="TableCell96" Width="50px" runat="server"></asp:TableCell>
<asp:TableCell ID="TableCel97" Width="120px" runat="server"></asp:TableCell>
<asp:TableCell ID="TableCell98" Width="50px" runat="server"></asp:TableCell>
<asp:TableCell ID="TableCel200" Width="120px" runat="server"></asp:TableCell>
<asp:TableCell ID="TableCell91" Width="50px" runat="server"></asp:TableCell>
<asp:TableCell ID="TableCell93" Width="120px" runat="server"><asp:Button ID="Insertbutton" runat="server" Text="Insert Additional Detail Type" /></asp:TableCell>
<asp:TableCell ID="TableCell92" Width="50px" runat="server"></asp:TableCell>
</asp:TableRow>
</asp:Table>


<!--Modal Screen to Insert Allocation Detail records !-->

<asp:Panel ID="Panel1" runat="server" Style="display: none" BackColor=white>

<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp:DetailsView ID="DetailsView2" runat="server"
AutoGenerateRows="False"
datakeynames="tran_id,tran_fk"
DataSourceID="Allocation"
DefaultMode="Insert"
HeaderText="Add a New Detail Allocation Info" Font-Bold="True">
<Fields>


<asp:TemplateField HeaderText="Type:">
<ItemTemplate>
<asp:DropDownList id="AddType" DataSourceID="TypeSource" Runat="Server"
DataTextField="tran_desc" DataValueField="tran_pk" SelectedValue='<%# Bind("tran_pk") %>'/>
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="Amount:">
<ItemTemplate>
<asp:Label ID="amount" Text='<%# Eval("amount") %>' Runat="Server" />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="amount" runat="server" Text='<%# Bind("amount") %>' ></asp:TextBox>
<ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server"
TargetControlID="amount" FilterType="Custom, Numbers" ValidChars="." />
</EditItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="Date:" ItemStyle-Width=125 >
<ItemTemplate>
<asp:Label ID="trandate" Text='<%# Eval("trandate") %>' Runat="Server" />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="trandate" runat="server" Text='<%# Bind("trandate") %>' Width=75></asp:TextBox>
<asp:ImageButton ID="ImgBntCalc" runat="server" ImageUrl="~/images/Calendar_scheduleHS.png" CausesValidation="False" />
<ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender5" runat="server"
TargetControlID="trandate"
Mask="99/99/9999"
MessageValidatorTip="true"
CultureName="en-US"
OnFocusCssClass="MaskedEditFocus"
OnInvalidCssClass="MaskedEditError"
MaskType="Date"
DisplayMoney="Left"
AcceptNegative="Left"
ErrorTooltipEnabled="True" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" Format="MM/dd/yyyy" TargetControlID="trandate" PopupButtonID="ImgBntCalc" />
</EditItemTemplate>
</asp:TemplateField>

<asp:TemplateField>
<EditItemTemplate>
<asp:Button ID="BtnInsert" CommandName="Insert" Text="Insert" Runat="Server"/>
</EditItemTemplate>
</asp:TemplateField>
</Fields>
<HeaderStyle Font-Bold="True" BackColor="Silver" HorizontalAlign="Center" />
</asp:DetailsView>
</ContentTemplate>

</asp:UpdatePanel>

<p style="text-align: center;">
<asp:Button ID="OkButton" runat="server" Text="Close" />
</p>

</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"
TargetControlID="Insertbutton"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
OkControlID="OkButton"
DropShadow="true">
</ajaxToolkit:ModalPopupExtender>

this doesnt happen automatically...you need to manually disable the other stuff.


Are you able to point me in the right direction on how to do that? I'm looking at the sampleWebsite and the video and I have no idea, besides in the style, on where they gray out the background page


just as you said... in styles.

What I've done is wrap it all in a container that I set to Enabled=False when they click the button/link/etc that causes the Popup


I have anexample of making a modal UpdateProgress. You should be able to use similar styles for the BackgroundCssClass as I do in the#progressBackgroundFilterexample

For example:

.modalBackground{
background-color:#000;
filter:alpha(opacity=50);
opacity:0.5;
}

-Damien


thank you guys for your help. I'm allset

No comments:

Post a Comment