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>