Free Download

Site Search

 

Top Download

Friday, October 5, 2007

ModalPopup with Multiple Cancel Buttons



I recently stumbled across the following post. In the entry, the author describes a simple modal popup he has created for his hotel reservation ASP.NET AJAX web application. While developing the popup control, he ran into a problem when trying to include both a 'Close' button at the bottom of the dialog as well as a close 'X' button in the top right corner:
I ran into a bit of a stumbling block because I wanted to have multiple buttons close the popup. I had the OK button and the cancel button centered and vertically aligned at the bottom of the window, but I also wanted a cancel button in the top right (ie "Cancel [X]") - with the familiar [X] that we know and love for closing something. The problem is, I couldn't figure out how to assign more than one control to the CancelControlID.
Live Demo Download
[Update 10/3/2007]: As Koen points out, the sample modal dialog doesn't look as nice in IE6 (it looks fine in FF and IE7)
Thankfully Dave found a solution that he found to be workable. He wrapped the
MoalPopupExtender in an UpdatePanel and explicitly called the Hide method from the server side button event handler. It sounds like this approach has worked him, but I thought I would provide a quick example of how you can dismiss the dialog without roundtripping to the web server.
To close the popup without having to leave the client, all you have to do is call the hide function of the
ModalPopup's client-side JavaScript behavior. Here is a quick example of the easiest way to accomplish this. Below is the markup for a modal popup that contains a message, an OK button and 6 Cancel buttons. Notice the two area's outlined in red. In the first outlined area I assigned the BehaviorID attribute of the ModalPopupExtender to a unique id ('mdlPopup' in this example). Then, in the OnClientClick of each of my Cancel buttons I pass this BehaviorID to the ASP.NET AJAX $find JavaScript shortcut function. The $find function will fetch the JavaScript behavior for the modal popup. Once I have a reference to the popup's behavior I invoke the hide function - which will hide my dialog.

No comments: