dialog.showModal not supported by Mozilla firefox any more

Question

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 polyfill to solve. But in last mozilla update, dialog.showModal() function is out of support and none of my popups open. Although they gave such solution to enabled via the dom.dialog_element.enabled preference in about:config, but it disturbs users.

I searched a lot about this but not find any solution to replace my codes. Because of hugeness of my project, it is so hard to use something such modal bootstrap. My popups and modals have some return values to save and such interactions. please introduce an alternative for this. Or help how can I write a new thing for this.

thanks.

Answer 1

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

(function () {
window.spawn = window.spawn || function (gen) {
    function continuer(verb, arg) {
        var result;
        try {
            result = generator[verb](arg);
        } catch (err) {
            return Promise.reject(err);
        }
        if (result.done) {
            return result.value;
        } else {
            return Promise.resolve(result.value).then(onFulfilled, onRejected);
        }
    }
    var generator = gen();
    var onFulfilled = continuer.bind(continuer, 'next');
    var onRejected = continuer.bind(continuer, 'throw');
    return onFulfilled();
};
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 yield
    if (caller.indexOf('yield') >= 0) {
        return new Promise(function (resolve, reject) {
            dialog.addEventListener('myEvent', function () {
                var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
                document.body.removeChild(dialog);
                resolve(returnValue);
            });
        });
    }

        //if using eval
        var isNext = false;
        var nextStmts = caller.split('\n').filter(function (stmt) {
            if (isNext || stmt.indexOf('showModalDialog(') >= 0)
                return isNext = true;
            return false;
        });
        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';
};
})();