AJAXControlToolkit ModalPopup On Homepage


Today I needed to create a Modal popup due to an urgent message that needed to go on our website. This was done using Javascript and AJAX in .Net 3.5.

First thing I did was add the style inline on the page due to the rarity of us using modal popups.

<style type="text/css">
.modalBackground{

background-color: #003791;
filter: alpha(opacity=80);
opacity: 0.8;
}
.modalPopup{
padding:25px;
color:Black;
font-size:12pt;
border: 8px solid #9A9A9A;
}
</style>

Next thing was the popup was to only happen on one page of the site. This was done with javaScript:

<script type="text/javascript" language="javascript">

function pageLoad() {
var url = location.href;
var modal = $find('ctl00_ctl00_ModalPopupExtender1');

if (modal != null && url.indexOf("Signin") != -1)
modal.show();
}

</script>

Note: To find the modal control name you may need to view the source of the page. ModalPopupExterner1 didn’t work for me because the rendered page was actually calling the munged code: ‘ctl00_ctl00_ModalPopupExtender1’.

If the URL does not have “Signin” in it (the homepage) then do not display the popup. Otherwise do.

Now to finish it up put in the Ajax ModalPopupExtender control:

<asp:Label ID="lbl" Text="" runat="server" />

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="lbl" PopupControlID="Panel1" CancelControlID="Button2" BackgroundCssClass="modalBackground" DropShadow="true" Drag="false" ></ajaxToolkit:ModalPopupExtender>

<asp:Panel ID="Panel1" runat="server" BackColor="#E2E2E2" Width="550px" CssClass="modalPopup";">
<p><strong>The Sky Is Falling!</strong></p>
<p>Buy Umbrellas</p>

<asp:Button ID="btnClose" runat="server" Height="30" Width="80" Text="Close" /></p>
</asp:Panel>

That sums it up. It should work beautifully.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s