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:
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.Conclusion:
We give some outstanding result using Ajax modal popup and if we include Animation in that, then that become looking nice.