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

mplungjan
– mplungjan

2012-03-22 14:32:50 +00:00
Commented Mar 22, 2012 at 14:32 — mplungjan
– mplungjan, Commented Mar 22, 2012 at 14:32

Community · Accepted Answer · 2017-05-23 12:10:53Z

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, 2017 at 12:10

CommunityBot

11 silver badge

answered Mar 22, 2012 at 14:51

Mordhak

2,6562 gold badges22 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mordhak Over a year ago

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.

Community · Accepted Answer · 2017-05-23 10:34:36Z

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, 2017 at 10:34

CommunityBot

11 silver badge

answered Mar 22, 2012 at 14:30

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

Shyju · Accepted Answer · 2012-03-22 14:32:42Z

-1

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

answered Mar 22, 2012 at 14:32

Shyju

220k106 gold badges420 silver badges498 bronze badges

2 Comments

mplungjan Over a year ago

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

Shyju Over a year ago

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

Collectives™ on Stack Overflow

adding style to jquery dialog buttons

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related