Sebastien Dionne Sebastien Dionne - 9 months ago 59
jQuery Question

jQuery ui dialog add a help icon in the titlebar

I'd like to add a help icon in the title bar (right corner) of the JQuery UI dialog box.

I started from the default dialog demo

$('span.OK').click(function() {
setTimeout(function(){ $( "#dialog" ).dialog(); }, 100);

here is the fiddle

I found that there is a default help icon in the theme, but I'm not sure how to display it in the title bar.

The goal is to have a ? (help) button display beside the X (close) button. When I click on it, I want a popup to open (probably another dialog) that will show the help.


Thanks to the answers given, I have now a help icon that will show an alert when clicked. However, when hovering over this icon, the cursor is a "move" cursor instead of a "pointer" cursor like the close button.

How can I make prevent the "move" cursor in favor of the "pointer" cursor?

PS. the demo in the answer below works in jsbin, but my demo in jsfiddle doesn't work.

Answer Source

You can use dialogClass property of jquery ui dialog to give a class to your dialog. Than you can search for that class and append ui-icon-help to dialogs titlebar. Check this fiddle:

Demo fiddle

Now you can set necessary events on the icon according to your need.

Hope this is what you are looking for!


I have checked your fiddle and update it, check this :

Updated fiddle