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.
- <asp:Button ID="Button1" runat="server" Text="Modal" />
- <cc:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="BCancel" Drag="true" OkControlID="BOk" PopupControlID="PModal" PopupDragHandleControlID="PHandle" TargetControlID="Button1" BackgroundCssClass="bModal">
- <Animations>
- <OnShown>
- <FadeIn Duration="0.8" Fps="40" />
- </OnShown>
- <OnHiding>
- <FadeOut Duration="0.8" Fps="40" />
- </OnHiding>
- </Animations>
- </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.
- <asp:Panel ID="PModal" runat="server">
- <asp:Panel ID="PHandle" runat="server" CssClass="modalHandle">Popup Title
- <span style="float:right;"><asp:Button ID="BCancel" runat="server" Text="X" CssClass="closeModal" /> </span>
- <br />
- </asp:Panel>
- <div class="modalContent">some content some content some content<br /> some content some content some content <br /><br />
- <asp:Button ID="BOk" runat="server" Text="Ok" />
- </div>
- </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.
- <style type="text/css">
- .bModal { background-color:#eee; opacity:0.6; filter:alpha(opacity=60);}
- .modalContent { background-color:#fff; border:1px solid #ccc; width:400px; padding:2px 4px;}
- .modalHandle { background-color:#ccc; cursor:move; height:18px; padding:2px 4px; font-weight:bold;}
- .closeModal { background-color:#ccc; color:#fff; font-weight:bold; border:0;}
- </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.
- protected void Page_Load(object sender, EventArgs e)
- {
- ModalPopupExtender1.Show();
- }
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.