Reputation: 11

adding style to jquery dialog buttons

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
        });
    }
}

Upvotes: 0

Answers (3)

Mordhak

Reputation: 2656

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.

Upvotes: 5