Showing posts with label isnt. Show all posts
Showing posts with label isnt. Show all posts

Monday, March 26, 2012

Modal popup isnt visible

I have a panel and a modalpopupextender on my page. Everything is very simple and exactly like the examples I've seen. The problem is that if I set the display attribute of the panel to "none" - as all the examples show - the panel isn't visible when it's popped up. The main page greys out and is inactive but I can't see the popup panel. If I remove the "display: none" from the panel stylesheet then everything works perfectly except that the panel is briefly visible when the page first renders. It instantly disappears but causes the page to flicker.

I'm not using a master page and I have ajax toolkit 1.0.10301.1

Any ideas?

Could you post a small, self-sufficient repro that demonstrates your problem? It seems like it should just work from what you are describing.
Here is the stylesheet 
.ReImportPanel{/*visibility:<span class='val'> hidden</span>;*/ font-size:small; border-width:medium; border-color:#3C6B34; border-style:solid; border-width:medium; width:500px; background-color: #ebebdf;}.modalBackground{ background-color:Silver; filter:alpha(opacity=70); opacity:0.7;}
 
Here is the page
 
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" Y=100 DropShadow="true" PopupControlID="pnlReimport" OkControlID="btnClosePopup" CancelControlID="btnClosePopup" BackgroundCssClass="modalBackground" TargetControlID="Button1"> </cc1:ModalPopupExtender> <asp:Panel ID="pnlReimport" runat="server" CssClass="ReImportPanel" Width="500px" HorizontalAlign="Center"> <h3> Popup Dialog</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br /> <br /> <asp:Button ID="btnClosePopup" runat="server" Text="Close" /> </asp:Panel> <asp:Button ID="Button1" runat="server" CausesValidation="False" Text="Show Popup" /> </div> </form> </body></html>
 

Here is the stylesheet 
.ReImportPanel{/*visibility:hidden*/ font-size:small; border-width:medium; border-color:#3C6B34; border-style:solid; border-width:medium; width:500px; background-color: #ebebdf;}.modalBackground{ background-color:Silver; filter:alpha(opacity=70); opacity:0.7;}
 
Here is the page
 
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" Y=100 DropShadow="true" PopupControlID="pnlReimport" OkControlID="btnClosePopup" CancelControlID="btnClosePopup" BackgroundCssClass="modalBackground" TargetControlID="Button1"> </cc1:ModalPopupExtender> <asp:Panel ID="pnlReimport" runat="server" CssClass="ReImportPanel" Width="500px" HorizontalAlign="Center"> <h3> Popup Dialog</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br /> <br /> <asp:Button ID="btnClosePopup" runat="server" Text="Close" /> </asp:Panel> <asp:Button ID="Button1" runat="server" CausesValidation="False" Text="Show Popup" /> </div> </form> </body></html>
Posted by wreckzxcy at 1:13 PM 0 comments
Labels: , , , , , , , , , ,

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
Posted by wreckzxcy at 9:20 PM 0 comments
Labels: , , , , , , , , , , , ,
Subscribe to: Posts (Atom)