jQuery UI Dialog Title/Header - custom button

Question

Is there a way to inject a custom button into the header/titlebar of a jQuery UI dialog? I typically suppress the close button. At the same time I use a lot of dialogs and from time to time users need to access information in another dialog (an error log) when they hear an audio alert. As things stand that other dialog is only accessible when the current modal dialog is hidden away. It would be handy to be able to stick in an unobtrusive button in the dialog title bar so users, who wish to do so, can try to figure out what caused the audio error alert.

Put it another way - would it be possible to hijack the default close button, alter its look, feel and function? So instead of the close box it shows, say, a help/question mark symbol and when clicked it pops up another dialog.

Dylan Corriveau · Accepted Answer · 2014-05-27 13:07:32Z

1

Why it just so happens that this is entirely possible! Although, its a bit hackish...

There's no real option in the dialog object to do this, but it can be done. The first step is to change the class of the close button on create (like shown below). changing the class of .ui-dialog-titlebar-close span will allow you to add in the symbol for close (in this case, the help icon)

$("#dlg").dialog({
    create: function(event, ui) { 
        var widget = $(this).dialog("widget");
        $(".ui-dialog-titlebar-close span", widget).removeClass("ui-icon-closethick").addClass("ui-icon-help");
    }
});

Next, you want to ensure that your dialog isn't closed when the user clicks on it, so you can override the beforeClose option. This is also done in the dialog creation, as shown below. The one thing that is required is that the method must return false, which will prevent the dialog from closing.

$("#dlg").dialog({
    ...
    beforeClose: function(){
        return HelpDialog();
    }
});
function HelpDialog(){
     //Show your help dialog...   
     return false;
});

I made a JSFiddle for it to help show it off. Hopefully this is what you were looking for (or close to it)!

edited May 27, 2014 at 13:07

answered May 23, 2014 at 13:06

Dylan Corriveau

2,5554 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DroidOS Over a year ago

Thank you. Your answer is not quite 100% - as I explan below - but you have certainly put me on the right track here so I am accepting it and marking it up. The issue you overlooked - if you open the help dialog from beforeClose and return false there you will be forcing the user to view the help dialog even when they have dismissed the original dialog by hittng the escape key.

Dylan Corriveau Over a year ago

That is true... I'm sure if a flag was put in to determine how they are closing the form would do it... Regardless, I'm glad I put you in the right direction in the end.

DroidOS Over a year ago

I have updated your fiddle just a bit. With the modifications you do not have the help dialog being forced on the user. At a price since Esc no longer closes the dialog but given that I always have Apply/Cancel buttons in my dialogs it does not matter.

Dylan Corriveau Over a year ago

Thanks Droid! I'll update the link in my answer to include yours in case anyone else has this issue.

DroidOS · Accepted Answer · 2014-05-28 12:54:16Z

A note for anyone running into this thread. Here is my hijack the close box function

function hijackDialogCloseButton(hlp)
{
 var tbc = $('.ui-dialog-titlebar-close:visible');
 if (0 < tbc.length)
 {
  tbc = $(tbc[tbc.length - 1]);
  tbc = tbc.find(">:first-child");
  tbc.removeClass("ui-icon-closethick").addClass("ui-icon-help");
  tbc.bind('click',function(){useHelp(hlp);return false;});
 }
}

A few explanations are in order

Call this from the open event handler for the dialog.
The function allows for stacking of modal dialogs: it only changes the close button for the top most modal dialog
In my project I am grabbing the click event and calling an internal useHelp method that displays the relevant Help URL in a separate window. You may well want to do something else. If so it may well be more appropriate to use another image in the close button. You will find a full list of jQuery UI icons here.

Collectives™ on Stack Overflow

jQuery UI Dialog Title/Header - custom button

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related