Matt Berseth

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 ...

Live Demo (FF, IE6, IE7) | Download

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 ... 

.container

.header

.body

.footer

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:

1. There isn't really a great way to use the ModalPopupExtender with a dialog that has multiple cancel buttons.  That's why both of my cancel buttons use the OnClientClick property to run a little JavaScript that dismisses the popup.  You can read more about this technique here.
2. 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). 
3. If you feel the need to dismiss a modal popup via the escape key, you can see how to do this here.
4. I left out the blue style YUI button because our application doesn't use that style button anywhere else

That's it.  Enjoy!