Had this question come up at work and found a good answer on stackoverflow here. It basically involves handling the open event, finding the buttons and applying a style to them.
Firstly a simple bit of html:
<a id="to_dialog_a" href="javascript:void(0);">click me</a>
<div id="to_dialog" style="border: 1px solid gold; background-color: #336699"></div>
And here is some javascript to wire it up. In the example below I have done things a little differently as the application we are developing needs to be localized; so i used the button index.
Note: This example doesn’t have any jquery.ui css to deal with.
A whole example html file is located here
$(document).ready(function() {
$("#to_dialog_a").click(function() {
$("#to_dialog").dialog("open");
});
$("#to_dialog").dialog({
autoOpen: false,
buttons : {
ok: function() {
alert("you clicked me!");
},
what: function() {
alert("you clicked me!");
},
cancel: function() {
alert("you clicked me!");
}
}
,
open: function(event, ui) {
// Get the dialog
var dialog = $(event.target).parents(".ui-dialog.ui-widget");
// Get the buttons
var buttons = dialog.find(".ui-dialog-buttonpane").find("button");
var okButton = buttons[0];
var whatButton = buttons[1];
var cancelButton = buttons[2];
// Add class to the buttons
// Add class to the buttons
$(okButton).addClass("primary");
$(whatButton).addClass("secondary");
$(cancelButton).addClass("thirdary");
}
});
});
