JQuery user interface: styling a dialog button

Question

Is there an easy way to apply CSS / icons to modal buttons in a jQuery UI modal dialog box?

If I enable HTML to display an icon with button text, it renders the HTML as text, rather than rendering the code.

I suppose I can write jQuery to find the button and rewrite the HTML with what I want, but I hope that there will be an easier direct way there.

Answer 1

I can see his rather old question, but you can do it much better now in the jQuery user interface, just add the "class" or "style" properties to the button object as follows:

$("#id-dialog").dialog({ modal: true, buttons: [ { text: "Save", click: function () { alert("save"); }, class:"sampleClass1", style:"color:Red" }, { text: "Cancel", click: function () { alert("close"); ;}, class:"sampleClass2"} ] }); 

Answer 2

Here is what I am using for our projects:

 $("#id-dialog").dialog({ modal: true, buttons: { 'Login': logIn, Cancel: logOut }, open: function() { $buttonPane = $(this).next(); $buttonPane.find('button:first').addClass('accept').addClass('ui-priority-primary'); $buttonPane.find('button:last').addClass('cancel').addClass('ui-priority-secondary'); } }); 

The first and last job in this case, since there are only two buttons. You can use: nth-child (index) if you have more than two buttons.

Another way to do this is to look at the parent element, which includes both the div element and the buttonpane div element, and then look for individual buttons in the parent element.

Answer 3

This thread - the jQuery UI confirmation dialog - exit control - seems to provide a cleaner option that should run faster than it finds.

 $('.ui-dialog-buttonpane').children('button')[1] 

I was stuck trying to use it at first, but got it working after I noticed that this would not return a jquery class DOM object; it returns html, so you need to insert it inside the jquery statement to use it. For example -

 var button1 = $('.ui-dialog-buttonpane').children('button')[1]; $(button1).removeClass('ui-button-text-only').addClass('ui-button-text-icon'); 

Answer 4

Yes, you can overwrite css modal dialog classes according to your needs. For example, you create a dialog specifying your custom class:

 $("#id-dialog").dialog({ dialogClass: "loadingScreenWindow", ... 

And then in css:

 /* hide the title bar on the loading screen */ .loadingScreenWindow .ui-dialog-titlebar { display: none; } 

See http://docs.jquery.com/UI/Dialog#theming for the selected dialog style