How do I go about adding styles to jquery buttons on a dialog? I want to color some one color and others another color.

I've tried using the class: but i didnt seem to get too much effect. am i doing something wrong? do i need to use something else? do i need to place something somewhere else?

code:

function DisplayCommonDialog(url, title, height, width) {
    HideDialogs();
    var dialogButtons = [{
        text: "Save",
        click: function () {
                    ...
                }
            }
        },
        width: '70px'
    }, {
        text: "Cancel",
        click: function () {
            $(this).dialog("close");
        }
    }];
    if (title.indexOf("Delete") >= 0) {
        dialogButtons = [{
            text: "OK",
            click: function () {
                ...
            },
            width: '70px'
        }, {
            text: "Cancel",
            click: function () {
                $(this).dialog("close");
            }
        }];
    }
if (popUpDialog != null) {
        $("#").dialog("option", {
            width: width,
            height: height,
            title: title,
            open: function () {
                ...
            },
            close: function () {
                ...
            },
            buttons: dialogButtons

        });
        ...
    }
    else {
        popUpDialog = $("#").dialog({
            width: width,
            height: height,
            autoResize: true,
            modal: true,
            title: title,
            open: function () {
                ...
            },
            close: function () { 
                ...
            },
            overlay:
            {
                opacity: 0.5,
                background: "black"
            },
            position: ['center', 'center'],
            buttons: dialogButtons
        });
    }
}

How do I go about adding styles to jquery buttons on a dialog? I want to color some one color and others another color.

I've tried using the class: but i didnt seem to get too much effect. am i doing something wrong? do i need to use something else? do i need to place something somewhere else?

code:

function DisplayCommonDialog(url, title, height, width) {
    HideDialogs();
    var dialogButtons = [{
        text: "Save",
        click: function () {
                    ...
                }
            }
        },
        width: '70px'
    }, {
        text: "Cancel",
        click: function () {
            $(this).dialog("close");
        }
    }];
    if (title.indexOf("Delete") >= 0) {
        dialogButtons = [{
            text: "OK",
            click: function () {
                ...
            },
            width: '70px'
        }, {
            text: "Cancel",
            click: function () {
                $(this).dialog("close");
            }
        }];
    }
if (popUpDialog != null) {
        $("#").dialog("option", {
            width: width,
            height: height,
            title: title,
            open: function () {
                ...
            },
            close: function () {
                ...
            },
            buttons: dialogButtons

        });
        ...
    }
    else {
        popUpDialog = $("#").dialog({
            width: width,
            height: height,
            autoResize: true,
            modal: true,
            title: title,
            open: function () {
                ...
            },
            close: function () { 
                ...
            },
            overlay:
            {
                opacity: 0.5,
                background: "black"
            },
            position: ['center', 'center'],
            buttons: dialogButtons
        });
    }
}

• javascript
• jquery
• jquery-ui

• possible duplicate of how to change jquery dialog buttons – mplungjan Commented Mar 22, 2012 at 14:32

3 Answers 3

to add css class in dialog buttons, just use the button button property "class" :

$("#").dialog({
    buttons: [{
        "text":'your button name',
        "click": $.noop,
        "class": 'your-css-class1 your-css-class2'
    }]
})

the property "class" in each declared button will be inserted when creating dialog.

Hope this help.

similare question about button style in dialog available here

http://jqueryui./themeroller/

or

How to style different hover colors for jquery dialog buttons

or how to change jquery dialog buttons

findout the CSS class being applied to the button using firebug and then override it in your css