MSDN Magazine Launch Issue - February 15, 2008 - (Page 21) function OnKeyPress(args) can be dragged around. To enable this, you { specify in the PopupDragHandleControlID if(args.keyCode == Sys.UI.Key.esc) { property the ID of the element to be used as $find(“ModalPopupExtender1”).hide(); the drag handle, and the embedded script } } does the rest. Note that you can drag the modThe code is triggered by keystrokes that al popup around, but only within the page affect the entire document. The handler rearea covered by the DOM. In other words, ceives a Sys.UI.DomEvent object through if your page area is defined by a DIV with a the args parameter. The object describes the height of 100 pixels, and you display the page mouse and keyboard status when a DOMin a browser window of 1600 by 1024 pixels, level event is caught. In particular, the keyyou can only drag the popup vertically for Code property indicates the ASCII code 100 pixels, regardless of the physical height Figure 4 Repositioning the Modal Dialog of the key pressed. Additional information of the browser window. By setting the RepositionMode property to any value but “None” about the Ctrl, Shift, and Alt keys is available, as well as information (the default), you enable the behavior’s script to update the posi- about the mouse position and button status. The Sys.UI.Key enution of the popup when the user scrolls or resizes the Web browser meration lists some predefined constants for the code of the most commonly used keys, including Esc, Enter, and Del buttons. Using window (see Figure 4). these tools, detecting if the Esc key is pressed is a breeze. Now let’s see how you can programmatically hide the popup. Closing the Popup Using the Esc Key An AJAX Control Toolkit extender has a client and server proIn Windows, the user can dismiss a message or dialog box by pressing the Esc key. In the AJAX Control Toolkit, this ability is gramming interface. The server interface is an ASP.NET server not present natively in the modal popup behavior. As you’ll see in control; the client interface is a JavaScript behavior class. This class a moment, though, detecting and handling the Esc key is not a big exposes a JavaScript programming model that mirrors the serverissue. Consider the following JavaScript code, which is attached to side programming model, so each of the properties in Figure 3 has its JavaScript counterpart. The container of these properties is an the KeyDown event of the page’s DOM: Cutting Edge launch2008 21 http://ASP.NET http://msdn.primalscript.com http://msdn.primalscript.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.