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

I can see its pretty old question but you can do it now in much nicer way in jQuery UI, just add 'class' or 'style' properties to button object like this:

$("#id-dialog").dialog({
    modal: true,
    buttons: [
        { text: "Save", click: function () { alert("save"); }, class:"sampleClass1", style:"color:Red" },
        { text: "Cancel", click: function () { alert("close"); ;}, class:"sampleClass2"}
    ]
});  

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.