Animated Ajax Modal PopUp Extender Control


In this article I'm trying to explain how to work with Modal PopUp extender with animation using AJAX. For this you must download the latest version of AjaxControlToolkit.dll and add Reference to the project.

Animated Ajax Modal PopUp Extender Control:


In this article I'm trying to explain how to work with Modal PopUp extender with animation. For this you must download the latest version of AjaxControlToolkit.dll and add Reference to the project.

Description:


The ModalPopup extender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it.

You can provide OnShowing/OnShown/OnHiding/OnHidden animations which are played when the modal content is shown and hidden.

Properties:


TargetControlID — the ID of the element that activates the modal popup.
PopupControlID – the id of the element to display as a modal popup.

CancelControlID - The ID of the element that cancels the modal popup

OnShowing — this will use to perform the operation more than once.
OnShown — this will be used to display the content in modal.
OnHide — this will be used to perform the animation at hide stage also.

Source Code:



Design a page like below


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AnimatedModalPopUpExtender.aspx.cs" Inherits="AnimatedModalPopUpExtender" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style1
{
color: #006600;
font-size: x-large;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<span class="style1"><strong>Animated Modal PopUp</strong></span><br />
<br />
<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
<asp:LinkButton ID="lnkAnimate" runat="server" Text="Animated Modal PopUp" />
<asp:Panel ID="AnimatedModalPopupPanel" runat="server" BorderStyle="Solid" Height="20"
Style="display: none" Width="100" >
<table style="height: 100%; width: 100%">
<tr>
<td style="text-align: left; vertical-align: top" valign="top">
Animated Modal PopUp extender
</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: bottom" valign="bottom">
<asp:Button ID="btnClose" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
CancelControlID="btnClose" Enabled="True" PopupControlID="AnimatedModalPopupPanel"
TargetControlID="lnkAnimate"
>
<Animations>
<OnShowing>
<Sequence>
<StyleAction AnimationTarget="btnClose" Attribute="display" Value="none" />
<Resize Duration="0" Height="50px" Width="50px" />
</Sequence>
</OnShowing>
<OnShown>
<Sequence>
<Parallel>
<FadeIn />
<Scale ScaleFactor="5" Center="True" />
</Parallel>
<StyleAction AnimationTarget="btnClose" Attribute="display" Value="" />
</Sequence>
</OnShown>
<OnHiding>
<Sequence>
<StyleAction AnimationTarget="btnClose" Attribute="display" Value="none" />
<Parallel>
<FadeOut />
<Scale ScaleFactor="5" Center="True" />
</Parallel>
</Sequence>
</OnHiding>
</Animations>
</ajaxToolkit:ModalPopupExtender>
</div>
</form>
</body>
</html>


OutPut:



1

2

3

ScriptManager:

<ajaxToolkit:ToolkitScriptManager EnablePartialRendering="true" runat="Server" ID="ScriptManager1" />

Without wrote this line in source code it's throws the server error to overcome this issue we just add above lines of code under div tag.

4

Conclusion:


We give some outstanding result using Ajax modal popup and if we include Animation in that, then that become looking nice.


Attachments

  • Source Code (45206-20422-Source-Code.zip)
  • Article by naveensanagasetti
    I hope you enjoyed to read my article, If you have any queries out of this then please post your comments.

    Follow naveensanagasetti or read 139 articles authored by naveensanagasetti

    More articles: Animated Extender Control

    Comments

    No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: