Open modal dialog from webpart in the parent page

Question

I have written a SharePoint application which is embedded in a page as an AppPart. Now I want to open a modal dialog in the parent page. This code opens the dialog only in the current AppPart:

function openModalDialog() {
    var options = SP.UI.$create_DialogOptions();

    options.title = "Application";
    options.width = 400;
    options.height = 600;
    options.url = "MyApplicationSite.aspx";

    SP.UI.ModalDialog.showModalDialog(options);
}

But I want to open it in the parent page. Is there a way to do this?

Answer 1

You can, however it'll require adding code to the parent page and utilizing window.postMessage(). You will have to add an event listener on the parent page to listen for the message, and then open the dialog:

window.addEventListener("message", receiveMessage, false);

var receiveMessage = function(event) {
    if (event.origin !== "your app") return; //event.origin will identify the sender of the message

    console.info(event.data); // event.data will contain data sent by the postMessage

    event.source.postMessage( returnObject, event.origin ); // event.source allows you to send a reply message with whatever data (the returnObject) you want/need to.
}

Your app part will have to post a message:

var messageData = { 
    url: "url to open in dialog",
    whateverElseYouMayNeedToSend: ""
};

window.parent.postMessage(messageData, document.referrer);

And if need be, add an event listener to the app part if you need to send data back to the app part.

For info on postMessage(), see here. For an example of how it's used in SharePoint, see this and this.

Answer 2

I have used below mention Script on Client webpart

---

   function SpotlightVideoPopup(youtubeurl) {
        var decodeurl = decodeURIComponent(youtubeurl);
        var url = decodeurl;
        var options = SP.UI.$create_DialogOptions();
        options.title = "Spotlight Video";
        options.width = 800;
        options.height = 600;
        options.url = url;
        options.dialogReturnValueCallback = CloseDialogCallback;
        SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);           
    }

    function CloseDialogCallback() {
        SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.commonModalDialogClose', 1);
    }

---

Please help me , where we need to add window.parent.postMessage(messageData, document.referrer); code . thanks