jQuery UI: Dialog button styling

Question

Is there an easy way to apply CSS/icons to the modal buttons on a jQuery UI modal dialog box?

If I include the HTML to display an icon with the button text, it shows the HTML as text rather than rendering the code.

I'm guessing I could write some jQuery to find the button and overwrite the HTML with what I want, but I'm hoping there's an easier more direct way.

Answer 1

Yes, you can overwrite modal dialog css classes to suit your needs. For example you create dialog with specifying your custom class:

$("#id-dialog").dialog({ 
            dialogClass: "loadingScreenWindow",
            ...

And then in css:

/* hide the title bar on the loading screen */ 
.loadingScreenWindow .ui-dialog-titlebar {
  display: none;
}

See http://docs.jquery.com/UI/Dialog#theming for the dialog style classed available

Answer 2

This is what I'm using right now for our projects:

$("#id-dialog").dialog({
        modal: true,
        buttons: {
            'Login': logIn,
            Cancel: logOut
        },
        open: function() {
            $buttonPane = $(this).next();
            $buttonPane.find('button:first').addClass('accept').addClass('ui-priority-primary');
            $buttonPane.find('button:last').addClass('cancel').addClass('ui-priority-secondary');                        
        }
    });

First and last work in this case since there are only two buttons. You can use the :nth-child(index) if you have more than two buttons.

Another way to do this would be to refer to the parent element which encompasses both the dialog div element as well as the buttonpane div element, and then look for the individual buttons within the parent element.

Answer 3

This thread - http://stackoverflow.com/questions/1786368/jquery-ui-confirmation-dialog-manipulating-output - seems to provide a cleaner option, which should execute faster than a find.

$('.ui-dialog-buttonpane').children('button')[1]

I got stuck trying to use it at first, but got it working after noticing that this will not return a jquery DOM object; it returns the html, so you need to stick it inside a jquery operator to use it. For example -

var button1 = $('.ui-dialog-buttonpane').children('button')[1];
$(button1).removeClass('ui-button-text-only').addClass('ui-button-text-icon');