Dialog.showmodal Not Supported By Mozilla Firefox Any More

I have a huge asp website project and for its popups, used from showModalDialog. Few months ago mozilla updated and some problem occured for this function. So I used ModalDialog po

Solution 1:

I solved the problem by some changes on dialog polyfill functions. Final code is:

(function () {
window.spawn = window.spawn || function (gen) {
    functioncontinuer(verb, arg) {
        var result;
        try {
            result = generator[verb](arg);
        } catch (err) {
            returnPromise.reject(err);
        }
        if (result.done) {
            return result.value;
        } else {
            returnPromise.resolve(result.value).then(onFulfilled, onRejected);
        }
    }
    var generator = gen();
    var onFulfilled = continuer.bind(continuer, 'next');
    var onRejected = continuer.bind(continuer, 'throw');
    returnonFulfilled();
};
window.showModalDialog = window.showModalDialog || function (url, arg, opt) {
    url = url || '';
    arg = arg || null;
    opt = opt || 'dialogWidth:300px;dialogHeight:200px';
    var caller = showModalDialog.caller.toString();
    var dialog = document.body.appendChild(document.createElement('dialog'));
    dialog.setAttribute('style', opt.replace(/dialog/gi, ''));
    dialog.innerHTML = '<a href="#" id="dialog-close" style="position: absolute; top: 0; right: 4px; font-size: 20px; color: #000; text-decoration: none; outline: none;">&times;</a><iframe id="dialog-body" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>';
    document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
    document.getElementById('dialog-close').addEventListener('click', function (e) {
        e.preventDefault();
        //dialog.close();var event = document.createEvent('Event');
        event.initEvent('myEvent', true, true);
        dialog.dispatchEvent(event);
    });

    try {
        //dialog.showModal()
        dialog.style.top = '50px';
        dialog.style.display = 'block';
        document.getElementsByTagName('body')[0].appendChild(dialog);
    }
    catch (err) {
        alert(err);
    }

    //if using yieldif (caller.indexOf('yield') >= 0) {
        returnnewPromise(function (resolve, reject) {
            dialog.addEventListener('myEvent', function () {
                var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
                document.body.removeChild(dialog);
                resolve(returnValue);
            });
        });
    }

        //if using evalvar isNext = false;
        var nextStmts = caller.split('\n').filter(function (stmt) {
            if (isNext || stmt.indexOf('showModalDialog(') >= 0)
                return isNext = true;
            returnfalse;
        });
        dialog.addEventListener('close', function () {
            var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
            document.body.removeChild(dialog);
            nextStmts[0] = nextStmts[0].replace(/(window\.)?showModalDialog\(.*\)/g, JSON.stringify(returnValue));
            eval('{\n' + nextStmts.join('\n'));
        });
    throw'Execution stopped until showModalDialog is closed';
};
})();

Solution 2:

Or just use the old polyfill (which is the correct solution for all browsers) and go to firefox config (about:config in your URL) and set dom.dialog_element.enabled to true, as per instructions in https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal