Animated Modal Popup Window with Drag Handle

The built in ModalPopupExtender of Ajax Control Tookit makes it very easy to implement modal windows in asp.net. The extender have options for the location of the popup, drag feature, drag handle and option for styling the background and animating the popup. In this post, I will setup an animated Modal Popup with drag feature.

The code for the ModalPopupExtender is below.

Modal Popup Extender

1. <asp:Button ID="Button1" runat="server" Text="Modal" />
2. <cc:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="BCancel" Drag="true" OkControlID="BOk" PopupControlID="PModal" PopupDragHandleControlID="PHandle" TargetControlID="Button1" BackgroundCssClass="bModal">
3.     <Animations>
4.         <OnShown>
5.             <FadeIn Duration="0.8" Fps="40" />
6.         </OnShown>
7.         <OnHiding>
8.             <FadeOut Duration="0.8" Fps="40" />
9.         </OnHiding>
10.     </Animations>
11.  
12. </cc:ModalPopupExtender>

The PopupControlID is the id of the control that will be displayed when the button (TargetControlID) is clicked. The Drag property determines if the popup can be dragged and PopupDragHandleControlID property determines the control that can be dragged. If PopupDragHandleControlID is not set, the popup can be dragged from anywhere within the popup. The Animation section determines the animations properties of the popup. In this example, I have set 0.8 seconds for fade in and dade out.

The code for the popup control (an asp Panel control in my example) is below.

Popup Panel

1. <asp:Panel ID="PModal" runat="server">
2.     <asp:Panel ID="PHandle" runat="server" CssClass="modalHandle">Popup Title
3.     <span style="float:right;"><asp:Button ID="BCancel" runat="server" Text="X" CssClass="closeModal" />    </span>
4.     <br />
5.     </asp:Panel>
6.  
7.     <div class="modalContent">some content some content some content<br /> some content some content some content <br /><br />
8.         <asp:Button ID="BOk" runat="server" Text="Ok" />
9.             
10.     </div>
11. </asp:Panel>

As can be seen, there is a nested Panel with id PHandle with a css class associated with it. This Panel will be used for dragging the control. It also contains the Cancel Button for closing the window. There is another nested div element that contains the contents for the popup. Then, there is the Ok button, which when clicked can do a postback and close the popup.

I have added css to different elements including the popup, background when popup is shown, drag handle and close button. The css code is below.

CSS

1. <style type="text/css">
2. .bModal { background-color:#eee; opacity:0.6; filter:alpha(opacity=60);}
3. .modalContent { background-color:#fff; border:1px solid #ccc; width:400px; padding:2px 4px;}
4. .modalHandle { background-color:#ccc; cursor:move; height:18px; padding:2px 4px; font-weight:bold;}
5. .closeModal { background-color:#ccc; color:#fff; font-weight:bold; border:0;}
6. </style>

In my example, the popup has been activated when the Button is clicked. The popup could also have been shown from the server side - for example, from Page Load event like below.

Page Load event

1. protected void Page_Load(object sender, EventArgs e)
2. {
3.     
4.     ModalPopupExtender1.Show();
5. }

Please note, if the popup doesn't need a button to be triggered, then the button os some other control still need to added on the page and can be hidden by using css like below. If the TargetControlId is left blank, the popup will not work.

Screen shot for the popup is below.

Using modal popup with ConfirmButton extender

ConfirmButton extender can be used to display prompt and depending on user input - the postback is performed. The prompt is the same window.prompt function. The prompt option can be changed to a modal popup. In this example, I will show how to use the modal popup option to display the prompt.

<div>

<asp:Button ID="Button2" runat="server" Text="ClickModal" OnClick="Button1_Click" />

<cc1:ConfirmButtonExtender ID="Button2_ConfirmButtonExtender" runat="server" OnClientCancel="CancelClick" ConfirmText="" Enabled="True" TargetControlID="Button2" DisplayModalPopupID="Button2_ModalPopupExtender">

</cc1:ConfirmButtonExtender>

<cc1:ModalPopupExtender ID="Button2_ModalPopupExtender" runat="server"

PopupControlID="Panel1" Enabled="True" TargetControlID="Button2"

OkControlID="Button3" CancelControlID="Button4" >

</cc1:ModalPopupExtender>

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

<asp:Panel ID="Panel1" runat="server">

This is a popup panel. <br />

<asp:Button ID="Button3" runat="server" Text="Ok" />

<asp:Button ID="Button4" runat="server" Text="Cancel" />

</asp:Panel>

</div>

The Button OnClick event is here.

protected void Button1_Click(object sender, EventArgs e)

{

Label1.Text = "Button1 clicked from server side";

}

The javascript for the page is here.

<script type="text/javascript">

function CancelClick() {

document.getElementById("<%=Label1.ClientID %>").innerHTML = "button1 clicked from client side";

}

</script>

Using ConfirmButton Extender

ConfirmButton extends a Button control or any of its derived type and displays a prompt to the user if to perform the Button OnClick event or not. ConfirmButton extends is useful when confirmation from the user is needed before performing an operation. The prompt shows options "OK" and "Cancel". If the OK button is clicked, the button functions normally - that is, performs a postback. If the Cancel button is clicked - the postback is canceled. JavaScript function can be performed when the Cancel button is clicked when the OnClientCancel property of the extender is set.

The following example shows how to extend a button.

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:Button ID="Button1" runat="server" Text="Click" OnClick="Button1_Click" />
<cc1:ConfirmButtonExtender ID="Button1_ConfirmButtonExtender" runat="server"
ConfirmText="Are you sure?" Enabled="True" TargetControlID="Button1"
OnClientCancel="CancelClick">
</cc1:ConfirmButtonExtender>

<asp:Label ID="Label1" runat="server"></asp:Label>
</div>

The javascript for the OnClientCancel property is below.

<script type="text/javascript">
function CancelClick() {
document.getElementById("<%=Label1.ClientID %>").innerHTML = "button1 clicked from client side";
}
</script>

The OnClick event is below.

protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Button1 clicked from server side";
}

Using DropShadow Extender | Asp.Net Ajax Control Toolkit

The DropShadowExtender adds a drop shadow to a asp.net Panel control. It is easy to add a DropShadowExtender to a panel control - simply add a panel control and add the extender to it.

After creating the page, I will add a panel control to the page.

    <asp:Panel ID="Panel1" runat="server" Height="180px" Width="400px" ForeColor="White" BackColor="Blue">
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    some text some text some text some text some text<br />
    </asp:Panel>

Notice, that I have added height, width, ForeColor and BackColor attributes to it. It is important to add the BackColor property to it. Otherwise the panel control looks with some text outside the .

Then, to the Panel control, a DropShadowExtender extender is added.

    <cc1:DropShadowExtender ID="Panel1_DropShadowExtender" runat="server"
        Enabled="True" TargetControlID="Panel1"
        Rounded="true" Opacity="0.5" Radius="1"  >
    </cc1:DropShadowExtender>

Notice the TargetControlId attribute of the extender is assigned to the ID attribute of the Panel. The Rounded attribute is set to true - this means the Panel and its drop shadow will have rounded corners. The Opacity attribute determines the opacity (between 0 and 1.0) of the drop shadow. The radius attribute determines the radius of the rounded corners.

Finally, ScriptManager is added to the page. This is required to for the AJAX controls/extenders to work.

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

Redirect message using AJAX UpdateProgress control

In this example, I will show how to use asp.net AJAX UpdateProgress control to display a message when a page is redirected to a different page. We can display a message either using javascript or by using meta refresh. With javascript the drawback is that a popup may need to be displayed or the user may have disabled javascript. With meta tag, the refresh will fire after the page is loaded. That is, it is independent of other events. For example, we cannot use meta refresh if we are redirecting the page on Button click.

In this page, we will have a Button, ScriptManager, UpdatePanel and UpdateProgress controls. Remember to add ScriptManager control, since otherwise the page will not work. The Button control will be ContentTemplate of the UpdatePanel and the UpdateProgress will be called when the Button is clicked.

Here, is the code for the .aspx page.



As you can see, when the Button is clicked, Button1_Click event is called. In the method, I am using Response.Write("..."). However, this did not write anything on the browser. This only writes after the method finishes - so we cannot use this.
Then, I am pausing the function for 5 seconds by calling System.Threading.Thread.Sleep(5000);. This is necessary to show the message in the UpdateProgress. If the event is not paused, the page will redirect without displaying any message.
Finally, I will redirect the page by calling Response.Redirect("url");.

Here is the code for the page.

 

When the page is run and the button clicked, the page is paused for 5 seconds andthe redirect message is shown by the AJAX UpdateProgress control.