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>
Author Paul Hayman

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.

18/Jul/2006 21:41 PM

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.

23/Jul/2006 21:45 PM

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...

27/Aug/2006 05:30 AM

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...

27/Aug/2006 21:15 PM

Luke said:

Hi,

good article but can you put the entire javascript example? Thank You

04/Oct/2006 12:13 PM

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?

24/Oct/2006 19:59 PM

Ronnie said:

Will this method work in Ajax Beta1?

30/Oct/2006 16:32 PM

Naveen Elangho said:

It works in AJAX beta

14/Nov/2006 21:51 PM

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?

18/Dec/2006 20:27 PM

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);

}

24/Jan/2007 00:28 AM

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

02/Feb/2007 03:24 AM

Paul said:

10/Jul/2007 20:58 PM

Add Comment

Name
Comment
 

Your comment has been received and will be shown once it passes moderation.