How to use javascript to open up a Sharepoint Modal Dialog to prompt user for input

Question

I am trying to use some JavaScript to open up a SharePoint Modal Dialog to prompt the user for input and then store that value into a variable. Does anyone know how to do this? I am doing this for a Nintex task form.

Answer 1

What have you tried so far? The simplest option would be to leverage the SP.UI.ModalDialog class which provides methods for opening a native SP modal - you can load either a separate page (ASPX, HTML, etc) via URL parameter or pass HTML directly to the modal to be rendered.

With either approach, your markup could then include an <input> to capture the value from the user and accompanying JS to store the input value wherever you want (including in a variable).

Depending on what other JS you're using (if any) or how the page is setup, you may also need to leverage SP2013's "Script On Demand" (SOD) function to ensure the necessary JS for the SP Modal is loaded.

Here's a simple example:

function OpenMyModal(SomeVar) {
    // If using inline HTML, first create a parent element...
    var MyHtmlElement = document.createElement('div');
    // ... then populate it
    MyHtmlElement.innerHTML = '<input... />';

    // Define the Modal's options
    var options = {
        // define a URL (and yes, you can pass params to that URL) or reference your HTML object, but NOT both!
        url: '../MyPage.aspx?MyParam=' + SomeVar + '&IsDlg=1',
        // html: MyHtmlElement,
        tite: 'Modal Title',
        allowMaximize: false,
        showClose: true,
        width: 430,
        height: 230
    };
    // This ensures the supporting JS needed is loaded on the page
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
    return false;
}