MSDN Magazine Launch Issue - February 15, 2008 - (Page 22) object with the ModalPopup extender control ID. This control is not part of the DOM, as it is created by the infrastructure of the Microsoft AJAX Library. Hence, you can’t use the $get function to get an instance of a behavior class; you must use the $find function instead. Both the server and client API of the modal popup have show and hide methods to control visibility. Note that the OnKeyPress event handler will not work unless you register it with the Microsoft AJAX Library. The best place to run this registration code is the pageLoad function, like so: function pageLoad(sender, args) { $addHandler(document, “keydown”, OnKeyPress); } the window.alert method is invoked. On custom modal popups, like those I’m building here, you have to provide for it yourself. Animation may become a native feature of the ModalPopup extender in the near future, but, for the time being, getting it to work is relatively easy thanks to the animation API already available in the AJAX Control Toolkit library. The following code refers to the Animation extender, which supports animation for a number of common predefined DOM events such as OnLoad, OnClick, OnMouseOver, and OnMouseOut. The TargetControlID points to the DOM element whose events will trigger the animation: The Microsoft AJAX Library invokes the pageLoad function when all of its startup tasks have completed and everything in the library and the page has been initialized. The library also automatically wires its loading stage to any JavaScript function with that name that can be found in the page. Now, any modal popup managed through the AJAX Control Toolkit’s ModalPopup extender can be dismissed with the Esc key. Adding Animation on Display With this completed, we can progress to other things. Wouldn’t you love to achieve the same kind of fade-in effect Windows Vista® uses for your Web applications? The effect is built-in for regular Windows-managed windows, such as the window that pops up when Animations can be combined in a sequence, and a few can even be played in parallel. The preceding code just fades in the panel associated with a modal popup for the specified duration and number of frames after the button is clicked. The code below shows a more sophisticated animation that executes multiple effects: Here, the modal popup is first moved to a new relative position and then resized and colored. The gallery of examples at asp.net/AJAX/ AjaxControlToolkit/Samples/Animation/Animation.aspx shows some demos; however, most of them can’t be applied to a modal popup without modifying the source code. The main issue lies in the fact that the modal popup is displayed before the animation starts. While that might work for a simple fade-in effect, if you want to create explosions or wipe-out effects, you need to get clever. The ModalPopup extender fires a few helpful events on the client, including the showing event. Here’s how you can subscribe to it: function pageLoad(sender, args) { $find(“ModalPopupExtender1”).add_showing(onModalShowing); } Any code you associate with the showing event runs just before the popup is displayed. You can use this event to perform any clientside initialization tasks. Other client events to which you can bind include hiding, hidden, and shown. Initializing the Elements of the Popup On the client, the ModalPopup extender toggles the visibility of the DOM tree, as identified by the PopupControlID attribute. In 22 msdnmagazine Cutting Edge http://www.crypkey.com http://asp.net/AJAX/AjaxControlToolkit/Samples/Animation/Animation.aspx http://asp.net/AJAX/AjaxControlToolkit/Samples/Animation/Animation.aspx http://www.crypkey.com
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.