Add class to jquery dialog buttons

Question

Hi there,

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!

Answer 1

Have you tried the addClass function?

Answer 2

.addClass function

rtfm :)

Answer 3

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

Answer 4

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!