I am creating a popup window in sharepoint using this code in javascript.

function openDialog(title, url, width, height, CallResult) {
    var options = { url: getUrl(url),
        title: title,
        allowMaximize: true,
        showClose: true,
        width: width,
        height: height,
        dialogReturnValueCallback: CallResult
    ModalDialog = SP.UI.ModalDialog.showModalDialog(options);
    return ModalDialog;

I want to know if anyone has an idea on how to change the title of the Modal Dialog dynamically when it is open.

For example when the popup opens the title is "my title" and when i press a button in the page that is contained in the popup the title changes.

Can it be done?

Thank you for your time.


This can be done with simple js:

SP.UI.UIUtility.setInnerText(parent.document.getElementById("dialogTitleSpan"), "hello");

This code was tested and works for me.

  • I am getting document.getElementById(...)' is null or not an object – user3470 May 20 '11 at 12:56
  • 1
    I've updated the answer. This code works for me, but I've tested it only from IE developer window. – Andrey Markeev May 20 '11 at 13:10
  • Do i need to do a postback so the change can be visible? – user3470 May 20 '11 at 13:11
  • Do i need to do a postback - no, it's a client-side action, it'll be performed immediately. – Andrey Markeev May 20 '11 at 13:14
  • I need to change the title from the page that is inside the popup – user3470 May 20 '11 at 13:16

The modal dialog is nothing more than a chromeless javascript window; while I haven't done it, I'd imagine you could use jQuery to sniff out the header bar of the modal dialog and render different text into it.

After loading jQuery you could do something like:

$("div.classofmodalheader").html('New Title');

I'd have to test it, but I'd imagine it'd work. You'd need to crack open some dev tools and explore the DOM of the modal window to figure out what that tag and class need to be.


Since Omlin posted the actual ID for the element, here's some revised jQuery (to his point, you can also do it with straight Javascript).

$("#dialogTitleSpan").html('New Title');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy