adding style to jquery dialog buttons

Question

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

possible duplicate of [how to change jquery dialog buttons](http://stackoverflow.com/questions/8590965/how-to-change-jquery-dialog-buttons) — mplungjan, Mar 22 '12 at 14:32

score 5 · Accepted Answer · edited May 23 '17 at 12:10

5

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

edited May 23 '17 at 12:10

Community

1
1

answered Mar 22 '12 at 14:51

Mordhak

2,646
2
20
14

That's true. I confess this solution for me is like a side effect because it is not really explain in documentation and is just the result that when creating button in dialog widget, all given properties will be added to the button itself before calling .button() on it. But the code is easier to read too. – Mordhak Mar 22 '12 at 15:16

score 0 · Answer 2 · edited May 23 '17 at 10:34

0

http://jqueryui.com/themeroller/

or

How to style different hover colors for jquery dialog buttons

or how to change jquery dialog buttons

edited May 23 '17 at 10:34

Community

1
1

answered Mar 22 '12 at 14:30

mplungjan

169,008
28
173
236

score -1 · Answer 3 · answered Mar 22 '12 at 14:32

-1

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

answered Mar 22 '12 at 14:32

Shyju

214,206
104
411
497

Not anymore, now we know to use either theme roller or give the classes in the buttons object. That way they can even change the classnames and it will still work – mplungjan Mar 22 '12 at 17:46
@mplungjan : if you are doing it thru javascript you are reapplying a class once the element is loaded with its default css. i think overriding the default style in our css is much easier. – Shyju Mar 22 '12 at 18:06

adding style to jquery dialog buttons

3 Answers3