Add class to jquery dialog buttons

Question

I want to add css class on buttons of a jquery dialog box.

Here is my code :

$(document).ready(function(){
      $('#messageBox p').html('bla bla bla. Ok?'); 
      $('#messageBox').dialog({
        modal : true,
        buttons: {
          'Yes': function() {
            doSomething();
            $(this).dialog('close');
          }, 
          'No': function() {
            doAnotherThing();
            $(this).dialog('close');
          }
        }
      });
    });

For example, I would like add ".red" class on my "yes" button.

How can I do that?

Thank you!

VDP · Accepted Answer · 2012-04-30 11:23:13Z

54

buttons: [
            {
               text: "Submit",
               "class": 'submit_class_name',
               click: function() {                     
                  $(this).dialog("close"); 
               }
            },
            {
               text: "Cancel",
               click: function() { 
                  $(this).dialog("close"); 
               }
            }
          ]

edited Apr 30, 2012 at 11:23

VDP

6,4104 gold badges33 silver badges54 bronze badges

answered Feb 28, 2012 at 10:46

spin

5565 silver badges2 bronze badges

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

2 Comments

VDP Over a year ago

This is the best answer! Note: use quotes around the class attribute, on iPad it throws an error (probably 'cause class is a reserved (key)word)

Luca Detomi Over a year ago

Same error in IE8 too. Solved with "class" instead of class

nicosomb · Accepted Answer · 2009-09-24 15:43:15Z

8

I've got the solution, thanks to Rich :

$(document).ready(function(){
      $('#messageBox p').html('bla bla bla. Ok?'); 
      $('#messageBox').dialog({
        modal : true,
        dialogClass: 'dialogButtons',
        buttons: {
          'Yes': function() {
                doSomething();
                $(this).dialog('close');
          }, 
          'No': function() {
                doAnotherThing();
                $(this).dialog('close');
          }
        }
      });
    });
$("div.dialogButtons div button:nth-child(1)").addClass("oneCssClass");
$("div.dialogButtons div button:nth-child(2)").addClass("anotherCssClass");

Solved!

answered Sep 24, 2009 at 15:43

nicosomb

4521 gold badge3 silver badges12 bronze badges

Comments

Rich · Accepted Answer · 2009-09-24 14:12:29Z

5

There's a dialogClass option of the dialog function you can use to specify a css class for the dialog itself. You can give it a unique class name and use this class name to get a reference to any child elements of the dialog. Then, use the selectors to either get a reference to the child buttons by position or by the text it contains (probably more efficient to use the former).

answered Sep 24, 2009 at 14:12

Rich

36.9k31 gold badges119 silver badges155 bronze badges

Comments

Yacoby · Accepted Answer · 2009-09-24 13:39:03Z

1

Have you tried the addClass function?

answered Sep 24, 2009 at 13:39

Yacoby

55.6k16 gold badges119 silver badges121 bronze badges

2 Comments

rahul Over a year ago

But where to add that addclass function?

nicosomb Over a year ago

same answer like phoenix... Where can I put the addClass function, because buttons are made by jquery dialog and buttons don't have ID's.

Mark Robinson · Accepted Answer · 2010-12-15 14:04:53Z

1

Had same problem. Very similar to nico's solution but add the styling to the open function on the dialog:

open: function () {
                // add style to buttons (can't seem to do this via the button definition without breaking IE)
                $(".someDialog .ui-dialog-buttonset button:first").not(".buttonPrimary").addClass("buttonPrimary");
                $(".someDialog .ui-dialog-buttonset button:last").not(".buttonSecondary").addClass("buttonSecondary");
                $("#someDialog").focus();
            }

answered Dec 15, 2010 at 14:04

Mark Robinson

13.3k13 gold badges66 silver badges85 bronze badges

Comments

Kevbo · Accepted Answer · 2018-05-23 19:22:28Z

I had a similar situation where i needed to add some styling to a button on the fly before the dialog was shown. Getting to the button was not very simple so i figured out a very simple way of getting to the buttons. During the creation of the dialog buttons i just gave them an 'id' and then i could get a reference to them with the usual jquery selector... $("#btnDelete").addClass("disabled")

buttons: [{
        id: "btnDelete",
        text: "Delete",
        click: function () {
            Delete();
            $(this).dialog('close');
        }
    }, {
        id: "btnSave",
        text: "Save",
        click: function () {
            Save();
            $(this).dialog('close');
        }
    }, {
        id: "btnCancel",
        text: "Cancel",
        click: function () {
            $(this).dialog("close");
        }
    }]

Brock Adams · Accepted Answer · 2011-11-27 22:01:02Z

-4

.addClass function

edited Nov 27, 2011 at 22:01

Brock Adams

94k23 gold badges242 silver badges312 bronze badges

answered Sep 24, 2009 at 13:39

Jeff

74010 silver badges16 bronze badges

1 Comment

nicosomb Over a year ago

yeah, i know this function... but I don't know how to use it in my case.

Collectives™ on Stack Overflow

Add class to jquery dialog buttons

7 Answers 7

2 Comments

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related