jqueryjquery-ui-dialog

How to add an image to the ui-dialog-titlebar in JQuery?


It is possible to add an image to the ui-dialog-titlebar into a dialog box?.


Solution

  • It sure is. Making it look pretty in terms of sizing and alignment will be the tricky part. But placing an image in the titlebar should be as simple as:

    $(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />");
    

    Edit:
    Building on what Nick said below (cheers), if you wanted to be really hardcore, you would place the code inside the open event of the dialog, ie:

    $(".putSelectorHere").dialog({
      open: function(event, ui) {
        $(".ui-dialog-titlebar").append("<img src='felix.gif' id='myNewImage' />");
      }
    });
    

    Click for relevant docs.