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.
[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.
There are a few things to note about this example:
- After calling the hide function, I return false to avoid the post back
- A similar technique could be used for multiple OK buttons
- I have set the display style attribute value to none on the Panel to avoid that initial popup flicker
While I think the above sample shows this technique pretty well, I thought it might be nice to actually implement a dialog similar to the one Dave had originally described. I use technorati quite regularly and I happen to like their sign-in dialog. It is simple and professional.
So I used this design for a delete confirm dialog (live demo) ...
The markup for this control is almost identical to the above sample, except it only uses 2 cancel buttons instead of 6. All of the real work is handled by the stylesheet. As usual, all of the code for this sample can be downloaded.
That's it. Enjoy!