JQuery UI: Dialog Button Styling

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 te

Solution 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"}
    ]
});  

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

Solution 3:

This thread - 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');

Solution 4:

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