Hi Steve,
There are a lot of people trying to do the same thing with ModalPopup, so I thought I'd create a sample (since those steps 1-6 aren't the clearest things in the world to follow). Unfortunately after talking with David (the ModalPopup expert... and author, for that matter), the approach I described doesn't really work when you're inside an UpdatePanel. The RegisterStartupScript code you send down will be run before everything's been set up properly... so to get it working we'll use the same approach but not actually show the popup until the UpdatePanel says it's done with the partial postback (I actually left in the old approach too, should anyone looking at this want to use it without an UpdatePanel - it's the script that is sent down if ScriptManager.IsInPartialRenderMode == false) by hooking into its propertyChanged event. Here's a full example showing what to do: <%@ 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">
private void Button1_OnClick(object sender, EventArgs args)
{
Content.Text = "I was setup by Button1!";
ShowModalPopup();
}
private void Button2_OnClick(object sender, EventArgs args)
{
Content.Text = "I was setup by Button2!";
ShowModalPopup();
}
private void ShowModalPopup()
{
ModalPopupProperties popup = MyModalExtender.GetTargetProperties(Target);
if (popup != null)
{
string script = ScriptManager.IsInPartialRenderingMode ?
string.Format("showModalPopup('{0}', '{1}');", ScriptManager.PageRequestManagerID, popup.ID) :
string.Format("function pageLoad() {{ var modal = $object('{0}'); if (modal) {{ modal._show(); }} }}", popup.ID);
Page.ClientScript.RegisterStartupScript(typeof(ModalPopupExtender), "open", script, true);
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ModalPopup Demo</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;
width:250px;
}
</style>
</head>
<body><form runat="server"><div>
<script language="javascript" type="text/javascript">
var showPopupHandler = null;
function showModalPopup(pageRequestManagerID, popupID)
{
var pageRequestManager = $object(pageRequestManagerID);
if (pageRequestManager)
{
var onUpdatePanelPropertyChanged = function(sender, eventArgs)
{
if ((eventArgs.get_propertyName() == "inPostBack") &&
!pageRequestManager.get_inPostBack())
{
var modal = $object(popupID);
if (modal)
modal._show();
pageRequestManager.propertyChanged.remove(showPopupHandler);
showPopupHandler = null;
}
};
showPopupHandler = Function.createDelegate(this, onUpdatePanelPropertyChanged);
pageRequestManager.propertyChanged.add(showPopupHandler);
}
}
</script>
<atlas:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" />
<atlas:UpdatePanel ID="Update" runat="server" Mode="Always">
<ContentTemplate>
<asp:Panel ID="Popup" runat="server" CssClass="modalPopup" style="display: none">
<asp:Label ID="Content" runat="server" Text="Original Content" /><br />
<asp:Button ID="OK" runat="Server" Text="OK" />
<asp:Button ID="Cancel" runat="Server" Text="Cancel" />
</asp:Panel>
<asp:Button ID="Target" runat="server" style="display: none" />
<asp:Button ID="Button1" runat="server" Text="Button 1" OnClick="Button1_OnClick" /><br />
<asp:Button ID="Button2" runat="server" Text="Button 2" OnClick="Button2_OnClick" /><br />
<atlasToolkit:ModalPopupExtender ID="MyModalExtender" runat="server">
<atlasToolkit:ModalPopupProperties
ID="MyPopup"
TargetControlID="Target"
PopupControlID="Popup"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="Ok"
CancelControlID="Cancel" />
</atlasToolkit:ModalPopupExtender>
</ContentTemplate>
</atlas:UpdatePanel>
</div></form></body>
</html>Again, we're looking at making this a LOT easier with updates in our next release.
Thanks,
Ted
This posting is provided "AS IS" with no warranties, and confers no rights.