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

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!


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/75

Comments


Matt,

If you havent you should check out the latest verion of the asp.net ajax toolkit. http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ConfirmButton/ConfirmButton.aspx They are using the confirm button extender with the modal popup extender to achieve what you are doing. Combining your two methods worked great for my situation in a gridview as there were far fewer naming collisions.

Bill

Matt,

I stumbled upon your site through ScottGus weekly links. I must say, your posts are awesome. I have already booked your site and have referenced it several. I too have been messing around with the YahooUI and like most of the tools they have. I have already incorporated Yahoos Acordian Menu a couple of my ASP.Net AJAX sites.

Keep up the great posts!!!

Posted by: Harvey on October 11, 2007 12:00 AM

Works, but in FF 2.0.0.7 the demo Yes No buttons appear unstyled.

This has got to be the most USEFUL blog I have ever read. I like the fact that you always show working demos. Keep up the great work! Thanks.

??????!

@harvey -

I left the buttons unstyled because the blue color doesnt fit too well with the current theme/stlyes I am using.

Matt.

@Matt Brown, @Jared -

Thanks for the feedback. I am glad you find the content useful.

Matt.

Bill -

Thanks for the link. I have a feeling that will make its way into a post real soon ...

Matt.

Posted by: thuy tien on January 9, 2008 12:00 AM

if i have a confirm, have button yes and no. if yes , it will submit on orther page.else no thing.do i have to do?

Im on the same problem as thuy tien.

when i click yes inside the confim dialog box the delete button doesnt autopostback as it did previously.

at least in firefox.

Posted by: Neeraj on March 4, 2008 12:00 AM

This article is very useful Can you pls help me with by this stuff with master page inserted into child page as my all pages have master pages into it.

Thanks,

ok,thanks!

Your many posts on the Ajax Control Toolkit are quite useful.

Your many posts on the Ajax Control Toolkit are quite useful.

it doesnt works on safari :(

Posted by: Wim De Blende on June 12, 2008 12:00 AM

Hi Matt,
When I use this in a content-page it gets all screwed up :s

Do I have to implement it differently in a masterpage environment?


Kind regards,
Wim

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Wim De Blende wrote: Hi Matt, When I use this in a content-page it gets all screwed up :s Do I have to implement it di...
  • Arshad wrote: it doesnt works on safari :( ...
  • Philip Lippard wrote: Your many posts on the Ajax Control Toolkit are quite useful. ...
  • Philip Lippard wrote: Your many posts on the Ajax Control Toolkit are quite useful. ...
  • powerlin518 wrote: ok,thanks! ...
  • Neeraj wrote: This article is very useful Can you pls help me with by this stuff with master page inserted into ch...
  • leblanc wrote: Im on the same problem as thuy tien. when i click yes inside the confim dialog box the delete butto...
  • thuy tien wrote: if i have a confirm, have button yes and no. if yes , it will submit on orther page.else no thing.do...