Modal popup dont work

Hi,

I update to new version of toolkit but my 2 modal popup on my application don't work correctly.

The modal popups work correctly after first page load...but if I first click on another button or do another operation on my page and next I try to open the modal popup it don't appear.

Why?

Thanks for help.

Can you show some code of the code opening Modal dialogs? This is a weird behavior!

Regards

Ok.

This is the extender:

 <cc1:ModalPopupExtender ID="MPE1" runat="server" TargetControlID="filterBtn" CancelControlID="CancelButton" OkControlID="OkButton2" DropShadow="true" BackgroundCssClass="modalBackground" PopupControlID="filtroPanel" > </cc1:ModalPopupExtender>

the modal popup is opened when I click on "filterBtn" button

and this is the panel:

1<asp:Panel ID="filtroPanel" runat="server" CssClass="modalPopup" HorizontalAlign="Center"2 Style="display: none">3 <asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional" >4 <Triggers>5 <asp:AsyncPostbackTrigger ControlID="divisioneDdl" EventName="SelectedIndexChanged" />6 <asp:AsyncPostbackTrigger ControlID="classeDdl" EventName="SelectedIndexChanged" />7 <asp:AsyncPostbackTrigger ControlID="famigliaDdl" EventName="SelectedIndexChanged" />8 <asp:AsyncPostbackTrigger ControlID="ClearFilterBtn" EventName="Click" />9 <asp:AsyncPostbackTrigger ControlID="filterBtn" EventName="Click" />10 </Triggers>11 <ContentTemplate>12 <table>13 <tr>14 <td style="width: 100px; text-align: right">15 Tipo Erbario</td>16 <td style="width: 100px; text-align: left">17 <asp:DropDownList ID="ErbarioDdl" runat="server" Width="150px">18 <asp:ListItem Selected="True">Tutti</asp:ListItem>19 </asp:DropDownList></td>20 </tr>21 <tr>22 <td style="width: 100px; text-align: right">23 Divisione</td>24 <td style="width: 100px; text-align: left">25 <asp:DropDownList ID="divisioneDdl" runat="server" AutoPostBack="True" OnSelectedIndexChanged="divisioneDdl_SelectedIndexChanged"26 Width="150px">27 <asp:ListItem Selected="True">Tutti</asp:ListItem>28 </asp:DropDownList></td>29 </tr>30 <tr>31 <td style="width: 100px; text-align: right">32 Classe</td>33 <td style="width: 100px; text-align: left">34 <asp:DropDownList ID="classeDdl" runat="server" AutoPostBack="True" OnSelectedIndexChanged="classeDdl_SelectedIndexChanged"35 Width="150px">36 <asp:ListItem Selected="True">Tutti</asp:ListItem>37 </asp:DropDownList></td>38 </tr>39 <tr>40 <td style="width: 100px; text-align: right">41 Famiglia</td>42 <td style="width: 100px; text-align: left">43 <asp:DropDownList ID="famigliaDdl" runat="server" AutoPostBack="True" OnSelectedIndexChanged="famigliaDdl_SelectedIndexChanged"44 Width="150px">45 <asp:ListItem Selected="True">Tutti</asp:ListItem>46 </asp:DropDownList></td>47 </tr>48 <tr>49 <td style="width: 100px; text-align: right">50 Genere</td>51 <td style="width: 100px; text-align: left">52 <asp:DropDownList ID="genereDdl" runat="server" AutoPostBack="True" Width="150px">53 <asp:ListItem Selected="True">Tutti</asp:ListItem>54 </asp:DropDownList></td>55 </tr>56 </table>57 <br />58 <asp:Button ID="OkButton" runat="server" OnClick="OkButton_Click" OnClientClick="clickbtn()"59 Text="OK" />60    61 <asp:Button ID="CancelButton" runat="server" Text="Cancel" OnClientClick="clickbtn()" />6263 </ContentTemplate>646566 </asp:UpdatePanel>676869 <asp:Button ID="OkButton2" runat="server" Style="visibility: hidden"/>70 </asp:Panel>

OkButton2 is a button that is clicked by a javascript function, to close the popup.

In the page there are some update panel.

Anyone?

Help me

I'm having the same issue with HoverMenuExtender and PopupControlExtender.
This sounds a lot likehttp://forums.asp.net/thread/1441672.aspx - try upgrading to Beta 2/61121.

Modal popup extender and divs

Good day!

First I have to say that the ajax control toolkit is great! Lots and lots of good stuff in there.

Now, I have designed a site that has a header, content and a footer div (to avoid frames, but to simulate the effect.. if there is a better way, please let me know).
The divs are positioned absolutely, and their locations are to some parts calculated during display-time. Here's a small diagram, to help you understand better.

<html><head></head>
<body><form>
<div id="divHeader">...</div>
<div id="divContent">
<div id="anotherDiv">...</div><modalpopupextender />
</div>
<div id="divFooter">...</div>
</form></body></html>

Very simplified, but it displays my setup.

Now to the problem. The modal popup extender displays a black opaque panel, to darken the inaccessible content. With this setup however, it only blocks out the divContent div, not the header nor the footer divs.

Any ideas of how to solve this?

That should not cause the modal background to not cover the header and footer. Could you possibly post a small complete code sample that reproduces this issue?

Ok then. I made a small sample site. I have no hosting, so Ill paste the code here. The codefile only contains the eventhandler btnShowPopup_Click, and all it does is ModalPopupExtender1.Show();. If you want to, I can zip the entire project to a file instead, but I think its more accessible this way, since its not very much code.

So, here we go (with excuses for poor formatting):

<%@. 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.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title
<script type="text/javascript">
window.onload = Init;
function SetContentSize()
{
divContent.style.top = divHeader.offsetHeight;
}

function Init()
{
window.onresize = SetContentSize;
SetContentSize();
}

</script>
<style type="text/css">
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="divHeader" style="position:absolute; left: 0px; right: 0px; top:0px; height: 100px;
background-color: #ffcc00; text-align: center; vertical-align: middle;">
This is the header div.<br />
This will not be covered by the extenders overlay.
</div>
<div id="divContent" style="position:absolute; left: 0px; right: 0px; bottom: 0px;
background-color: #ffee99; text-align: center; vertical-align: middle;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
This is the content div.
<asp:Button ID="btnShowPopup" runat="server" Text="Show popup" OnClick="btnShowPopup_Click" />
<asp:Panel Style="border-right: gray 1px solid; border-top: gray 1px solid; display: none;
vertical-align: top; border-left: gray 1px solid; color: black; border-bottom: gray 1px solid;
background-color: #dddddd" ID="pnlPopup" runat="server" HorizontalAlign="Left">
This is text inside the popup!
<asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
<asp:Button Style="visibility: hidden" ID="btnHidden1" runat="server"></asp:Button>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="true"
CancelControlID="btnClose" BackgroundCssClass="modalBackground" PopupControlID="pnlPopup"
TargetControlID="btnHidden1">
</cc1:ModalPopupExtender>
</ContentTemplate></asp:UpdatePanel>
</div>
</form>
</body>
</html>

I should add; Even though the script in my example fills no real function, it does in the live version where my divHeader has a variable height. I included it to be more true to the original.

It seems to be a problem. Thanks for providing a repro. Work Item8796 tracks it.

Thank you for the attention.
I tried replacing the modal popup with an ordinary div. I think one can summarize the problem like this: Internet Explorer can NOT position an absolutely positioned div outside of the absolutely positioned div in which it resides. Therefore, I believe this to be more of a browser problem, than an ajax problem.

I have not tested this on Firefox / Opera / etc.. It would be interesting to see if they can handle it.

Jeez, I just read what I wrote above.. I assure you though; it makes sense if you think about it.

Modal popup extender postback issue

Hai

I'm using Ajax toolkit modal popup extender to open the popup window, In that window having two buttons, save button save the entered information into database and cancel button close the popup window.When click the save button changes are saved and window remain open, this is my requirement. But when i clicked that save button the informations are saved and popup window is closed.

How i will get my requirement ? Plz help anyone.

kamal...

use Show method of the control object to make it visible

Hi Kama19101980,

If you want to show a window when storing data to database and hide the window as soon as the process finished, I think you should better useUpdatePanel + UpdateProgress. Otherwise(keep the window open after storing the data), we shall use UpdatePanel + ModalPopupExtender.

Now you can put all the inputs inside an UpdatePanel and the Button is set to be the trigger of the UpdatePanel or just inside the UpdatePanel.For example,

<UpdatePanel>controls <Button></UpdatePanel>

When the partial update occurs, we show the ModalPopupExtender. You can do it like this,

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

function BeginRequestHandler(sender, args){
$find("ModalPopupExtender's BehaviorID").show();
}

I hope this help.

Best regards,

Jonathan

Modal Popup Extender with multiple TargetControlID?

Hello, I'm new to the toolkit and I'm looking for ideas to accomplish a somewhat trivial goal.

What I want is to show a panel in modal form base on the item chosen on a list.

Imagine a list of employees and you want that when the user clicks on one of them a modal window comes up and allows the user to edit the chosen employee's data.

the problem is that the ModalPopupExtender has room just for a single TargetControlID.

Does anyone know a way to accomplish this?

TIA

Yes I beleive you are correct in that the ModalPopupExtender allows only one TargetControlID, however you can have multiple ModalPopupExtenders on a page if you need multiple (different) Panels for input.

If you need only one Modal and want to show it from many different events you can create a button which will be shown as visible inline but on Page Load set the visibility to none and set it as your TargetControlID. Then in any events you need the modal simply call ModalPopupExtender.show() method with 'ModalPopupExtender' being the ID of your extender. The reason I say to leave the visibility set to true inline is I recently read a post where the Events were not getting attached at run time in some cases unless they were set to visible at compile time. If you take a look at the Sample code for the toolkit they have an example of this scenario. Also keep in mind you might want to call the hide() method on the ModalPopupExtender when your finished with Input as some never get disposed and might cause problems next time you try to show one.

Hope this helps...

Modal Popup Locks Up After Codeplex Upgrade

My modal popup quit working after I updated the Atlas Control Toolkit to60731 Production - 7/31/2006. Yes I'm at the latest version of Atlas also. My modal popup worked before, with the exception of the drowdownlist still being active and not grayed out. I was hoping that the newer version would fix this. Now when I click on the image control the dropdownlist controls disappear and thats it. Any help would be great....

Hi James,

In the latest update to the Toolkit the ModalPopup was extended to hide elements like<select> when it was displayed so they would not show through the transparent overlay (due to a bug in IE). It's supposed to be shown again as soon as the modal popup is completed. If that's not happening for you, could you provide more details about your situation?

Thanks,
Ted

I figured it out. My panel was inside a div tag. I was using this div tag to hide the panel like this<divstyle="display: none">. I Removed the div tag and added the style to the panel like this <asp:PanelID="PanelDate"runat="server"CssClass="modalPopup"style="display:none">. I do not know if this is a new but because it use to work the other way. Any how thanks for replying back.

modal popup problem

hi, im having a problem on this ajax toolkit, i tried to play around the sample website of modal popup, and its working great..but then, when i tried to put the codes inside my page, it doesn't work. i placed it inside the tabs (with hand coded values) and tried to run it, the values went blank, and the link does not appear. i placed it outside, the wholepage went blank.whats seems to be the problem? is it ok for me to put it inside another ajax control like tabs?if yes, how can i achieve this? here is my code by the way

this is inside the tabs

1<cc1:TabContainer ID="Tabs" runat="server" Height="500" ScrollBars="Auto">23 <cc1:TabPanel runat="Server" ID="Panel3" HeaderText="Payslip" >4 <ContentTemplate>5 Email: <asp:TextBox ID="emailText" runat="server" />6 <br /><br />7 <asp:Button ID="Button2" runat="Server" Text="Save" />8 <br /><br />910 <asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to change the paragraph style" />1112 <asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">13 <asp:Panel ID="Panel3" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">14 <div>15 <p>Choose the paragraph style you would like:</p>16 </div>17 </asp:Panel>18 <div>19 <p>20 <input type="radio" name="Radio" id="RadioA" checked="checked"21 onclick="styleToSelect = 'sampleStyleA';" />22 <label for="RadioA" class="sampleStyleA"23 style="padding: 3px;">Sample paragraph text</label>24 </p>25 <p>26 <input type="radio" name="Radio" id="RadioB"27 onclick="styleToSelect = 'sampleStyleB';" />28 <label for="RadioB" class="sampleStyleB"29 style="padding: 3px;">Sample paragraph text</label>30 </p>31 <p>32 <input type="radio" name="Radio" id="RadioC"33 onclick="styleToSelect = 'sampleStyleC';" />34 <label for="RadioC" class="sampleStyleC"35 style="padding: 3px;">Sample paragraph text</label>36 </p>37 <p>38 <input type="radio" name="Radio" id="RadioD"39 onclick="styleToSelect = 'sampleStyleD';" />40 <label for="RadioD" class="sampleStyleD"41 style="padding: 3px;">Sample paragraph text</label>42 </p>43 <p style="text-align: center;">44 <asp:Button ID="OkButton" runat="server" Text="OK" />45 <asp:Button ID="CancelButton" runat="server" Text="Cancel" />46 </p>47 </div>48 </asp:Panel>4950 <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"51 TargetControlID="LinkButton1"52 PopupControlID="Panel1"53 BackgroundCssClass="modalBackground"54 OkControlID="OkButton"55 CancelControlID="CancelButton"56 DropShadow="true"57 PopupDragHandleControlID="Panel3" />5859 Hit Save to cause a full postback.60 </ContentTemplate>61 </cc1:TabPanel>6263 <cc1:TabPanel runat="Server" ID="TabPanel1" HeaderText="Email" >64 <ContentTemplate>65 Email: <asp:TextBox ID="TextBox1" runat="server" />66 <br /><br />67 <asp:Button ID="Button4" runat="Server" Text="Save" />68 <br /><br />69 Hit Save to cause a full postback.70 </ContentTemplate>71 </cc1:TabPanel>7273 <cc1:TabPanel runat="Server" ID="TabPanel2" HeaderText="Email" >74 <ContentTemplate>75 Email: <asp:TextBox ID="TextBox2" runat="server" />76 <br /><br />77 <asp:Button ID="Button5" runat="Server" Text="Save" />78 <br /><br />79 Hit Save to cause a full postback.80 </ContentTemplate>81 </cc1:TabPanel>8283 <cc1:TabPanel runat="Server" ID="TabPanel3" HeaderText="Email" >84 <ContentTemplate>85 Email: <asp:TextBox ID="TextBox3" runat="server" />86 <br /><br />87 <asp:Button ID="Button6" runat="Server" Text="Save" />88 <br /><br />89 Hit Save to cause a full postback.90 </ContentTemplate>91 </cc1:TabPanel>92 </cc1:TabContainer>

Hi,

Please try to remove theDropShadow="true" in the ModalPopupExtender.

Modal Popup Style opacity

Hey guys n gals,

In the SampleWebSite that came with the AJAX Control ToolKit the stlying for the modalBackgroud looks like this.

/*Modal Popup*/

.modalBackground {

background-color:Gray;

filter:alpha(opacity=70);

opacity:0.7;

}

I was wondering if anyone could tell me what theopacity:0.7; Portion of this style does? Take this Element out of the style and it has no visual effect on the page. The reason i am asking this is becuase thefilter:alpha(opacity=70); Portion is causing me abnormal side effects on a completly unrelated control ( at least to my junior eyes )

The side effect involves a GridView which i have setup to have a Frozen header and a onscroll event for saving the position of the scrollbar. The actual side effect occurs on a postback which shifts the frozen header above where it was initialy appearing like it is floating off the grid.

In any case, I would like to know what theopacity:0.7; Does as i need to find an alternative to thefilter:alpha(opacity=70);

Regards,

Michael

Okay so opacity isnt supported in IE7, nor colour: rgba...

Modal Popup with asp.net controls on a masterpage through code behind

For some reason, if I have a masterpage, which has a modal popup control (or any toolkit item it seems) and if I have asp.net controls inside of that toolkit control like a textbox or something. If I try and access that textbox from code behind file of that masterpage it will not find it.

Anyone else had this issue?

I have commented out all my code and slowly tested my way through adding it back in and nothing works. But if I take that same exact code and put it on a regular (non-masterpage) file, it works like it's supposed to.

So what am I doing wrong on the masterpage to be able to find my controls from codebehind? Is there some sort of "extra" code I need to use to access items inside of a toolkit control for masterpages specifically?

Thanks.

Scratch that, I'm a freaking moron it seems.

I thought I was in the "page_load" sub, but I was not inside of any sub or function.

Apparently been a long day, I'm good now.

Thanks

ModalDialogExtender issues...

A little help on this one. I downloaded the refreshed ATLAS toolkit and am trying to implement the new ModalDialogExtender into my app. I'm able to get the dialog box to appear so thats great news...

However, the dialog appears in the upper left corner of the screen and the background is not disabled...

I took the sample implementation and applied it to my app just to get off the ground so I'm not sure what I'm doing wrong. I looked at the styles "modalBackground" and "modalPopup" but didn't see anything jumping out at me...

.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
}

Any thoughts..??

Post a simple sample, please. :)

For what it's worth, ModalPopup automatically tries to center the control pointed to by PopupControlID. Please make sure that control (hint: an asp:Panel works well) is going to be friendly to sizing (i.e., no "width=100%" on it or children, etc.).

Here's the user control where I placed the ModalPopup. You'll note that the popup is linked with a ASP.NET menu control that is also in the same user control. Again, the control for some reason appears in the upper left corner of the screen which is in no relation to the menu control contained within this user control... Very strange. Also, as I mentioned I'm still able to interact with items on the screen behind the dialog..

<%@. Control Language="C#" AutoEventWireup="true" CodeFile="treeView_Attachments.ascx.cs" Inherits="treeView_Attachments" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><script type="text/javascript"><!-- function addAttachment() { // declare objects var arguments = new Object(); var buttonRefresh = document.getElementById("<%=buttonRefresh.ClientID %>"); arguments.root = "<%=HelperLibrary.Web.Url.Root %>" arguments.query_ID = "<%=Helper.query_ID %>"; arguments.queryParameter_ID = "<%=Helper.queryParameter_ID %>"; arguments.pageRequested = arguments.root + "/addattachment.aspx?" + arguments.query_ID + "=" + arguments.queryParameter_ID; window.showModalDialog(arguments.root + "/source/dialog.aspx", arguments, 'status:no;dialogWidth:325px;dialogHeight:200px;help:no;'); buttonRefresh.click();// location.reload(false);// location.replace(location.pathname + location.search); } function viewAttachment(id) { // declare objects var arguments = new Object(); arguments.root = "<%=HelperLibrary.Web.Url.Root %>" arguments.query_ID = "<%=Helper.query_ID %>"; arguments.queryParameter_ID = id; window.open(arguments.root + "/viewattachment.aspx?" + arguments.query_ID + "=" + arguments.queryParameter_ID); }--></script><br /><asp:Menu ID="menu" runat="server" Orientation="Horizontal" OnMenuItemClick="menu_MenuItemClick"></asp:Menu><asp:Button ID="buttonRefresh" runat="server" Text="refresh" Style="display:none" OnClick="buttonRefresh_Click"/><hr /> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup"> This is a test... <asp:Button ID="OkButton" runat="server" Text="OK"></asp:Button> <asp:Button ID="CancelButton" runat="server" Text="Cancel"></asp:Button> </asp:Panel> <atlasToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"> <atlasToolkit:ModalPopupProperties TargetControlID="menu" PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="OkButton" CancelControlID="CancelButton" /> </atlasToolkit:ModalPopupExtender><atlas:UpdatePanel ID="placeHolder_UpdatePanel" runat="server" Mode="Conditional"> <Triggers> <atlas:ControlEventTrigger ControlID="menu" EventName="MenuItemClick" /> <atlas:ControlEventTrigger ControlID="buttonRefresh" EventName="Click" /> </Triggers> <ContentTemplate> <asp:PlaceHolder ID="placeHolder" runat="server"></asp:PlaceHolder> </ContentTemplate></atlas:UpdatePanel><br />

I put your sample code into a new page and added the necessary supporting infrastructure to get the page running, but I'm not seeing the problem behavior you report. The page I've got seems to work fine. Here it is - please modify it as necessary to reproduce your problem and post it again so I can see what you're seeing. Thanks!

<%@. Page Language="C#" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void menu_MenuItemClick(object sender, MenuEventArgs e) { L.Text = "menu_MenuItemClick"; }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style type="text/css">.modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7;}.modalPopup { background-color:#ffffdd; border-width:3px; border-style:solid; border-color:Gray; padding:3px;} </style></head><body> <form id="form1" runat="server"> <div> <atlas:ScriptManager ID="SM" runat="server"> </atlas:ScriptManager> <asp:Label ID="L" runat="server">Label</asp:Label> <asp:Menu ID="menu" runat="server" Orientation="Horizontal" OnMenuItemClick="menu_MenuItemClick"> <Items> <asp:MenuItem Text="menu item a"></asp:MenuItem> <asp:MenuItem Text="menu item b"></asp:MenuItem> </Items> </asp:Menu> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup"> This is a test... <asp:Button ID="OkButton" runat="server" Text="OK"></asp:Button> <asp:Button ID="CancelButton" runat="server" Text="Cancel"></asp:Button> </asp:Panel> <atlasToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"> <atlasToolkit:ModalPopupProperties TargetControlID="menu" PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="OkButton" CancelControlID="CancelButton" /> </atlasToolkit:ModalPopupExtender> <atlas:UpdatePanel ID="placeHolder_UpdatePanel" runat="server" Mode="Conditional"> <Triggers> <atlas:ControlEventTrigger ControlID="menu" EventName="MenuItemClick" /> <atlas:ControlEventTrigger ControlID="buttonRefresh" EventName="Click" /> </Triggers> <ContentTemplate> <asp:PlaceHolder ID="placeHolder" runat="server"></asp:PlaceHolder> </ContentTemplate> </atlas:UpdatePanel> </div> </form></body></html>