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 |
| Published |
: Friday, 14 July, 2006 |
Paul is the COO of kwiboo ltd consultant and has more than a decade of 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.