CODEWITHSUNDEEP
javascriptfirefoxmodal-dialog
Mojtaba Ahmadi
Mojtaba Ahmadi

Reputation: 1098

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 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.

Upvotes: 4

Views: 5450

Answers (2)

Mark Bordelon
Mark Bordelon

Reputation: 123

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

Upvotes: 0

Mojtaba Ahmadi
Mojtaba Ahmadi

Reputation: 1098

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';
};
})();

Upvotes: 2

Related Questions