YUI Style Yes/No Confirm Dialog with the ModalPopupExtender
If you have read a few of my most recent posts (here and here) you have probably noticed that I have been spending some time with Yahoo!'s YUI control library. During my most recent visit I came across a great looking confirm dialog. It's simple and straight to the point ...
The team I currently work on had already been debating whether or not we needed to replace our existing standard confirm dialog with something a little better looking. Watching the demo pretty much sealed it. So I signed up for investigating what markup and style classes were needed to get this dialog into our application and working with the AjaxControlToolkit's ModalPopupExtender control. The following are the steps I did to accomplish this ...
Design the HTML Structure and CSS Classes
Our existing confirm dialog is not CSS friendly. That made tweaking the look and feel a little harder than it should have been. So this time around, I figured I would design an HTML structure that could easily be modified via stylesheet. Here is what I went with:
<div class="container"> <div class="header"> <!-- title --> </div> <div class="body"> <!-- body message --> </div> <div class="footer"> <!-- yes/no/cancel buttons --> </div> </div>
I pretty much just created placeholders for the various regions of a confirm dialog box. Below is a series of screenshots that has the class highlighted in blue ...
Create the CSS Classes and Add the ModalPopupExtender
After the markup was defined I used the IE Developer Toolbar to take a peek at to style attributes used by Yahoo!'s demo site. There was nothing out of the ordinary here (unless you are familiar with CSS image sprites). You can view the stylesheet I am using here.
After the style classes were defined I went ahead and integrated my new dialog with the ModalPopupExtender. To do this, I wrapped my markup in an asp:Panel and added the Yes/No input's as asp:Button's as well as an asp:LinkButton for the 'X' in the upper right hand corner. Here is the markup for the ModalPopup as well as my asp:Panel:
<asp:Button ID="btnTrigger" runat="server" Text="Show Popup" /> <ajaxToolkit:ModalPopupExtender runat="server" BehaviorID="popup" TargetControlID="btnTrigger" PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" OkControlID="btnOk" /> <asp:Panel ID="pnlPopup" runat="server" CssClass="modalpopup" style="display:none"> <div class="container"> <div class="header"> <asp:Label runat="server" CssClass="msg" Text="Are you sure?" /> <asp:LinkButton runat="server" CssClass="close" OnClientClick="$find('popup').hide(); return false;" /> </div> <div class="body"> <asp:Label runat="server" CssClass="msg" Text="Do you want to continue?" /> </div> <div class="footer"> <asp:Button ID="btnOk" runat="server" Text="Yes" Width="40px" /> <asp:Button ID="btnCancel" runat="server" Text="No" Width="40px" OnClientClick="$find('popup').hide(); return false;" /> </div> </div> </asp:Panel>
A few things to note:
- I added a local style attribute to the asp:Panel that will hide the popup initially - this will avoid that modal popup flicker you sometimes see (you can read more about this here).
- If you feel the need to dismiss a modal popup via the escape key, you can see how to do this here.
- I left out the blue style YUI button because our application doesn't use that style button anywhere else
That's it. Enjoy!