JQuery UI - Change the button class

Question

Can someone explain how I can change the CSS class on the button, for the standard JQuery UI dialog widget? My addClass() call is not working.

$("#dialog-message").dialog({
    modal: true,
    buttons: {
        Ok: function () {
            $(this).dialog("close");
            $(this).addClass("btn");
        }
    }
});

Post your HTML, please.

keeehlan
– keeehlan

2013-10-30 21:01:33 +00:00
Commented Oct 30, 2013 at 21:01 — keeehlan
– keeehlan, Commented Oct 30, 2013 at 21:01
maybe you'll find this helpful: addClass in create function

ho.s
– ho.s

2013-10-30 21:23:42 +00:00
Commented Oct 30, 2013 at 21:23 — ho.s
– ho.s, Commented Oct 30, 2013 at 21:23

Popnoodles · Accepted Answer · 2013-10-30 21:24:42Z

1

To answer what you meant to ask, "Can someone explain how I can change the CSS class of a button for the standard JQuery UI dialog widget" there are a few ways. This is the most self-contained. Note that 'class' is encapsulated with single quotes. This is because IE breaks if it's not.

$("#dialog-message").dialog({
    modal: true,
    buttons:[
        {
            text: 'Ok', 
            'class': 'btn',
            click: function(){
                $(this).dialog("close");
            }
        },
        {
            text: 'Cancel', 
            'class': 'cancel',
            click: function(){
                $(this).dialog("close");
            }
        },
    ]
});

edited Oct 30, 2013 at 21:24

answered Oct 30, 2013 at 21:17

Popnoodles

28.4k3 gold badges49 silver badges55 bronze badges

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

Comments

rtemperv · Accepted Answer · 2013-10-30 21:06:46Z

0

The dialogClass seems to be what you are looking for

$("#dialog-message").dialog({
    modal: true,
    dialogClass: 'btn',
    ...

});

answered Oct 30, 2013 at 21:06

rtemperv

6755 silver badges18 bronze badges

3 Comments

Slinky Over a year ago

Thanks but that did not affect the class attached to the button

Popnoodles Over a year ago

That might be what you meant to ask instead of what you asked!

Jose Over a year ago

This IS a correct answer, just not complete. Your dialog now has a class name, you can navigate to the button you wish since you can now reference any child elements!

Collectives™ on Stack Overflow

JQuery UI - Change the button class

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related