CODEWITHSUNDEEP
jqueryjquery-ui
DroidOS
DroidOS

Reputation: 8880

jQuery UI Dialog Title/Header - custom button

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.

Upvotes: 0

Views: 974

Answers (2)

DroidOS
DroidOS

Reputation: 8880

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.

Upvotes: 0

Dylan Corriveau
Dylan Corriveau

Reputation: 2557

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)!

Upvotes: 1

Related Questions