Add class to jquery dialog buttons

user_178414 0
Viewed 28678

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!

class css jquery
7 Answers

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();
            }
user_983570

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");
        }
    }]
user_20882450
Related