OfficeJs - How to display modal dialog

Question

I am using OfficeJs to create word add-in. In that i want to show modal dialog on click on ribbon button. I have used below API

Office.context.ui.displayDialogAsync(url, {height: 30, width: 20}); to display dialog but it is non-modal dialog. Is there any API to display modal dialog using officeJS.

Answer 1

Office.js doesn't provide any other method for displaying dialogs. From MSDN:

The following design considerations apply to dialog boxes:

• An Office Add-in task pane can have only one dialog box open at any time. Multiple dialogs can be open at the same time from Add-in Commands (custom ribbon buttons or menu items).
• Every dialog box can be moved and resized by the user.
• Every dialog box is centered on the screen when opened.
• Dialog boxes appear on top of the host application and in the order in which they were created.

Use a dialog box to:

• Display authentication pages to collect user credentials.
• Display an error/progress/input screen from a ShowTaskpane or ExecuteAction command.
• Temporarily increase the surface area that a user has available to complete a task.

Answer 2

Custom application will load inside side loaded panel or we can say inside iFrame

You can write some restrict code inside your dailog window using check if loaded application running inside sidepanel

function inIframe () {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}