GeekZilla
Launching an Atlas ModalPopupExtender from JavaScript
Looking for an Ajax version of this article??
Looking round the web there are some crazy ways people are trying to launch the ModalPopupExtender from JavaScript, the most common way being setting a timeout which calls the Click method of a hidden button.
Here's a more eligant way.
The groundworks
Add a hidden button (which will NEVER be used) surrounding it with a hidden DIV.
<div style="display:none; visibility:hidden;"> <asp:Button runat="server" ID="hiddenButton" /> </div>
Add the ID of the hidden button to the ModalPopupProperties and more importantly, add an ID to the ModalPopupProperties element it's self.
<atlasToolkit:ModalPopupProperties ID="ModalPopupProperties" TargetControlID="hiddenButton" PopupControlID="NotesPanel" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="OkButton" OnOkScript="addComment()" CancelControlID="CancelButton" /> </atlasToolkit:ModalPopupExtender>
Showing the modal popup
Now you've done this, in Javascript, you can display the modal quite easily... here's how.
$object('ModalPopupProperties')._show();
Hiding the modal popup
Just as easy...
$object('ModalPopupProperties')._hide();
Full example
As requested here is a full example.. also, see the downloadable demo.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ 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"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Demo</title> </head> <body> <form id="form1" runat="server"> <div> <atlas:ScriptManager ID="sc1" EnablePartialRendering="true" runat="server"> </atlas:ScriptManager> <h1>Demo</h1> <h2>Launching a modal popup extender from javascript</h2> <a href="#" onclick="$object('ModalPopupProperties1')._show(); return false;"> Click here to launch the popup</a> <div style="display:none; visibility:hidden;"> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup"> <h1>Here it is!</h1> <p>Here is the model popup!!</p> <center> <asp:Button ID="OkButton" runat="server" Text="OK"></asp:Button> <asp:Button ID="CancelButton" runat="server" Text="Cancel"></asp:Button> </center> </asp:Panel> </div> <script type="text/javascript"> function onOk() { return true; } </script> <atlasToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"> <atlasToolkit:ModalPopupProperties ID="ModalPopupProperties1" TargetControlID="hiddenButton" PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="OkButton" OnOkScript="onOk()" CancelControlID="CancelButton" /> </atlasToolkit:ModalPopupExtender> <div style="display:none; visibility:hidden;"> <asp:Button runat="server" ID="hiddenButton" /> </div> </div> </form> </body> </html>
Paul is the COO of kwiboo ltd and has more than 20 years IT consultancy experience. He has consulted for a number of blue chip companies and has been exposed to the folowing sectors: Utilities, Telecommunications, Insurance, Media, Investment Banking, Leisure, Legal, CRM, Pharmaceuticals, Interactive Gaming, Mobile Communications, Online Services.
Paul is the COO and co-founder of kwiboo (http://www.kwiboo.com/) and is also the creator of GeekZilla.
Comments
Anonymous said:
ModalPopupProperties does not contain the ID attribute. I added one and got a runtime exception. Although this looks like a good idea it doesn't work.
Paul Hayman said:
It works for me. Agreed, ID doesn't appear in the IntelliSence.. I'm using verison 1.0.60504.0 of the AtlasControlToolkit.
Alan Grant said:
Hi
yep adding the ID worked despite it not being an attribute in the intellisense.
When I call ._show() the modal popup shows but almost immediately hides as is the OkControl has been clicked.
fascinating...
phayman said:
That's bizzaire... what version of Atlas are you using Alan? I think it's time for me to put together a demo page...
Luke said:
Hi,
good article but can you put the entire javascript example? Thank You
Greg said:
Hi...With the new release of beta 1 and the new AjaxControlToolkit...I am unable to get the code in your article to work??...have you tried it with the latest updates of MS Ajax beta 1 and AjaxControlToolkit?
Ronnie said:
Will this method work in Ajax Beta1?
Naveen Elangho said:
It works in AJAX beta
John said:
I'm using version 1.0.61020.0 of the AjaxControlToolKit
The window opens and then immediately closes.
Is there a workaround for this?
DonSchmitt said:
I was seeing this problem in FireFox. My workaround was to do this after the click processing is complete:
function OnShow2()
{
$find("LoginPopupExtender").show();
}
function OnShow()
{
window.setTimeout("OnShow2()", 0);
}
Chuck said:
FYI...
I think Micro changed things in the RTM. You have to reference the behavior now.
You add a "BehaviorID" to the ModalPopupExtender...
BehaviorID: In cases where you would like to access the client-side behavior for your extender from script code in the client, you can set this BehaviorID to simplify the process. See example below:
<ns:MyExtender ID="myExtender1"
runat="server" TargetControlID="Button1" BehaviorID="myBehavior1" />
<script type="text/javascript">
function changeValue() {
var myBehavior = $find("myBehavior1");
myBehavior.show();
}
</script>
http://ajax.asp.net/ajaxtoolkit/Walkthrough/ExtenderClasses.aspx
Paul said:
See Ajax version : http://www.geekzilla.co.uk/View38736C2B-BAD3-418A-A5B0-DAC4F1A5A83A.htm