Apply CSS to jQuery Dialog Buttons

Question

So I currently have a jQuery dialog with two buttons: Save and Close. I create the dialog using the code below:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

However, both buttons are the same color when this code is used. I'd like my Cancel button to be a different color than my Save. Is there a way to do this using some built in jQuery options? I didn't get much help from the documentation.

Note that the Cancel button I'm creating is a pre-defined type, but 'Save' I'm defining myself. Not sure if that will have any bearing on the issue.

Any help would be appreciated. Thanks.

UPDATE: Consensus was that there were two roads to travel here:

Inspect the HTML using a Firefox plugin like firebug, and note the CSS classes that jQuery is applying to the buttons, and take a stab at overriding them. Note: in my HTML, both buttons were used the exact same CSS classes and no unique IDs, so this option was out.
Use a jQuery selector on dialog open to catch the button that I wanted, and add a CSS class to it then.

I went with the second option, and used the jQuery find() method as I think this is more appropriate than using :first or :first-child b/c the button that I wanted to change wasn't necessarily the first button listed in the markup. Using find, I can just specify the name of the button, and add CSS that way. The code I ended up with is below:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
        open: function() {
            $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass');
        }
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

Community · Accepted Answer · 2017-05-23 11:33:16Z

141

I’m reposting my answer to a similar question because no-one seems to have given it here and it’s much cleaner and neater:

Use the alternative buttons property syntax:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: [
        {
            text: "Cancel",
            "class": 'cancelButtonClass',
            click: function() {
                // Cancel code here
            }
        },
        {
            text: "Save",
            "class": 'saveButtonClass',
            click: function() {
                // Save code here
            }
        }
    ],
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

edited May 23, 2017 at 11:33

CommunityBot

11 silver badge

answered Mar 28, 2011 at 9:35

Raphael Schweikert

18.6k6 gold badges59 silver badges80 bronze badges

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

4 Comments

Raphael Schweikert Over a year ago

It seems like with new versions of jQuery UI (or jQuery, I can’t say), you might have change the key for the additional classes from className to "class".

kajo Over a year ago

In version > jqueryui 1.8. exists class not className.

maxp Over a year ago

@RaphaelSchweikert - This will throw a script error in IE7/8/9, see the solution here: stackoverflow.com/questions/1138291/…

Raphael Schweikert Over a year ago

@maxp What kind of script error? Be sure to quote the "class" and it shouldn’t.

tvanfosson · Accepted Answer · 2009-12-01 19:00:04Z

13

You can use the open event handler to apply additional styling:

 open: function(event) {
     $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
 }

edited Dec 1, 2009 at 19:00

answered Dec 1, 2009 at 18:50

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

1 Comment

Adrian P. Over a year ago

That's working fine when you have one dialog. If you open a new dialog from the first one, it works only the first time. Meaning you close the second dialog and then reopen it, the style is not applied anymore.

jeroen · Accepted Answer · 2009-12-01 18:55:10Z

6

I think there are two ways you can handle that:

Check using something like firebug if there is a difference (in class, id, etc.) between the two buttons and use that to address the specific button
Use something like :first-child to select for example the first button and style that one differently

When I look at the source with firebug for one of my dialogs, it turns up something like:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <button class="ui-state-default ui-corner-all ui-state-focus" type="button">Send</button>
    <button class="ui-state-default ui-corner-all" type="button">Cancel</button>
</div>

So I could for example address the Send button by adding some styles to .ui-state-focus (with perhaps some additional selectors to make sure I override jquery's styles).

By the way, I´d go for the second option in this case to avoid problems when the focus changes...

edited Dec 1, 2009 at 18:55

answered Dec 1, 2009 at 18:47

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

1 Comment

Chris22 Over a year ago

for adding to the solution about the focus state of the button.

animuson · Accepted Answer · 2012-02-09 18:38:20Z

4

You should change the word "className" for "class"

buttons: [ 
    { 
        text: "Cancel",
        class: 'ui-state-default2', 
        click: function() { 
            $(this).dialog("close"); 
        } 
    }
],

edited Feb 9, 2012 at 18:38

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Feb 9, 2012 at 18:23

dfortun

7547 silver badges7 bronze badges

1 Comment

sinemetu1 Over a year ago

using class: 'ui-state-default2' could cause browser issues since class is a key word in some versions of JavaScript (for reference). Use "class" : 'ui-state-default2' instead.

Nick Spiers · Accepted Answer · 2009-12-01 18:46:43Z

3

Maybe something like this?

$('.ui-state-default:first').addClass('classForCancelButton');

answered Dec 1, 2009 at 18:46

Nick Spiers

2,3542 gold badges19 silver badges31 bronze badges

Comments

jitter · Accepted Answer · 2009-12-01 19:02:11Z

3

Select the div which has role dialog then get the appropriate buttons in it and set the CSS.

$("div[role=dialog] button:contains('Save')").css("color", "green");
$("div[role=dialog] button:contains('Cancel')").css("color", "red");

answered Dec 1, 2009 at 19:02

jitter

54.8k11 gold badges114 silver badges130 bronze badges

1 Comment

Chris Lawlor Over a year ago

other answers saying to use the 'open' dialog option didn't work for me (although the selector I was using was correct if used after the dialog was opened), but this did.

eragon2262 · Accepted Answer · 2016-07-19 20:34:21Z

2

There is also a simple answer for defining specific styles that are only going to be applied to that specific button and you can have Jquery declare element style when declaring the dialog:

id: "button-delete",
text: "Delete",
style: "display: none;",
click: function () {}

after doing that here is what the html shows:

doing this allows you to set it, but it is not necessarily easy to change using jquery later.

answered Jul 19, 2016 at 20:34

eragon2262

3172 silver badges13 bronze badges

Comments

rfunduk · Accepted Answer · 2009-12-01 18:46:06Z

1

Why not just inspect the generated markup, note the class on the button of choice and style it yourself?

answered Dec 1, 2009 at 18:46

rfunduk

30.5k5 gold badges61 silver badges55 bronze badges

1 Comment

rfunduk Over a year ago

He didn't provide the markup. My answer was written a couple hours before his update where he specifies that fact.

Rory · Accepted Answer · 2009-12-01 18:47:32Z

0

I suggest you take a look at the HTML that the code spits out and see if theres a way to uniquely identify one (or both) of the buttons (possibly the id or name attributes), then use jQuery to select that item and apply a css class to it.

answered Dec 1, 2009 at 18:47

Rory

2,7421 gold badge20 silver badges11 bronze badges

Comments

Qammar Feroz · Accepted Answer · 2016-07-08 17:21:23Z

0

If still noting is working for you add the following styles on your page style sheet

.ui-widget-content .ui-state-default {
  border: 0px solid #d3d3d3;
  background: #00ACD6 50% 50% repeat-x;
  font-weight: normal;
  color: #fff;
}

It will change the background color of the dialog buttons.

answered Jul 8, 2016 at 17:21

Qammar Feroz

7188 silver badges21 bronze badges

Collectives™ on Stack Overflow

Apply CSS to jQuery Dialog Buttons

10 Answers 10

4 Comments

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

4 Comments

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related