A while back I blogged about SubModal, a little tool for creating nice modal dialogs on websites.

One of the things I wanted to do was have the modal dialog return a value, like the showModalDialog does in IE.

To achieve this, follow these instructions.

In your “main” html page, declare a callback function and a button that will launch the modal dialog:

    function myFunction(val){
        alert("Return value is...");
        alert(val);
    }

Then create an input button to launch the modal dialog.

<input type="button" onclick="showPopWin('modalcontent.html', 400, 200, myFunction);" />

Then, in the submodalsource file, or where ever you have your JS stored, change this function to include a return value, and have it use it.

/**
 * @argument callReturnFunc - bool - determines if we call the return function specified
 * @argument returnVal - anything - return value
 */
function hidePopWin(callReturnFunc, returnVal) {
    //alert(callReturnFunc);
    gPopupIsShown = false;
    restoreTabIndexes();
    if (gPopupMask == null) {
        return;
    }
    gPopupMask.style.display = "none";
    gPopupContainer.style.display = "none";
    if (callReturnFunc == true && gReturnFunc != null) {
        // edited by CDM -- gReturnFunc(window.frames["popupFrame"].returnVal);
        gReturnFunc( returnVal );
    }
    gPopFrame.src = gLoading;
    // display all select boxes
    if (gHideSelects == true) {
        displaySelectBoxes();
    }
}

Then finally on your modal page, just some code to close the window, and pass back the return value.

<button onclick="window.parent.hidePopWin(true, 'I am the return value')">close</button>