example - popup javascript

¿Cómo mostrar múltiples cuadros de diálogo?

Question

Tengo script para abrir el cuadro de diálogo:

window.modalDialog = function (url, arg, opt) {
        url = url || ''''; //URL of a dialog
        arg = arg || null; //arguments to a dialog
        opt = opt || ''dialogWidth:300px;dialogHeight:200px''; //options: dialogTop;dialogLeft;dialogWidth;dialogHeight or CSS styles

        var caller = modalDialog.caller.toString();
        var dialog = document.body.appendChild(document.createElement(''dialog''));
        var splitter = opt.split(",");
        dialog.setAttribute(''style'', splitter[0].replace(/dialog/gi, ''''));
        dialog.innerHTML = ''<a href="#" id="dialog-close">&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();
        });
        dialog = document.querySelector(''dialog'');
        dialogPolyfill.registerDialog(dialog);

        function addListeners() {
            document.querySelector(''dialog'').addEventListener(''mousedown'', mouseDown, false);
            window.addEventListener(''mouseup'', mouseUp, false);
        }

        function mouseUp()
        {
            window.removeEventListener(''mousemove'', divMove, true);
        }

        function mouseDown(e) {
            window.addEventListener(''mousemove'', divMove, true);
        }

        function divMove(e) {
            var div = document.querySelector(''dialog'');
            div.style.position = ''absolute'';
            div.style.top = e.clientY + ''px'';
            div.style.left = e.clientX + ''px'';
        }

        addListeners();
        dialog.showModal();
        dialog.addEventListener(''close'', function () {
            var returnValue = document.getElementById(''dialog-body'').contentWindow.returnValue;
            document.body.removeChild(dialog);
            nextStmts[0] = nextStmts[0].replace(/(window/.)?modalDialog/(.*/)/g, JSON.stringify(returnValue));
            eval(''{/n'' + nextStmts.join(''/n''));
        });
        throw ''Execution stopped until modalDialog is closed'';
    };

cuando llamo a este script, el cuerpo de diálogo fue reemplazado por una nueva URL en lugar de crear un nuevo diálogo. ¿Cómo puedo crear múltiples diálogos?

EDITAR

Mi mayor problema es que mis cuadros de diálogo tienen el mismo padre (interlocutor), por lo que en el cuadro de diálogo polyfill js, hay una secuencia de comandos para verificar si hay cuadros de diálogo o no en el documento padre, si es así, luego Failed to execute showModal on dialog: The element is already open, and therefore cannot be opened modally.

EDITAR

He creado el jsfiddle, pero no sé cómo llamar al sitio web de una fuente externa desde jsfiddle. https://jsfiddle.net/godofrayer/gvLpLjkq/

Answer 1

He modificado un poco tu ejemplo y ahora puedes abrir varios cuadros de diálogo. El problema fue el getElementById . Una identificación tiene que ser única en un documento. Así que he organizado los diálogos en una matriz y los elementos de ID contienen el índice de la matriz al final de id id="dialog-close''+dlgIndex+''" .

Mi modificacion esta here

Aquí puedes ver los principales cambios.

var dlgs = [];
    window.showModalDialog = window.showModalDialog || function(url, arg, opt) {
        url = url || ''''; //URL of a dialog
        arg = arg || null; //arguments to a dialog
        opt = opt || ''dialogWidth:300px;dialogHeight:200px''; //options: dialogTop;dialogLeft;dialogWidth;dialogHeight or CSS styles        
        var caller = showModalDialog.caller.toString();

        var dialog = document.body.appendChild(document.createElement(''dialog''));
        // Adds the Dialog to an Array of Dialogs
        var dlgIndex = dlgs.length;
        dlgs[dlgIndex] = dialog;
        dialog.setAttribute(''style'', opt.replace(/dialog/gi, ''''));
        dialog.innerHTML = ''<a href="#" id="dialog-close''+dlgIndex+''" style="position: absolute; top: 0; right: 4px; font-size: 20px; color: #000; text-decoration: none; outline: none;">&times;</a><iframe id="dialog-body''+dlgIndex+''" src="'' + url + ''" style="border: 0; width: 100%; height: 100%;"></iframe>'';
        document.getElementById(''dialog-body''+dlgIndex).contentWindow.dialogArguments = arg;
        document.getElementById(''dialog-close''+dlgIndex).addEventListener(''click'', function(e) {
            e.preventDefault();
            dialog.close();
        });
        dialog.showModal();
        //if using yield
        if(caller.indexOf(''yield'') >= 0) {
            return new Promise(function(resolve, reject) {
                dialog.addEventListener(''close'', function() {
                    var returnValue = document.getElementById(''dialog-body''+dlgIndex).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''+dlgIndex).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'';
    };
})();

var showDialog = function() {
    window.showModalDialog("https://heise.de/");
  console.log("ShowSecond!!!")
  window.showModalDialog("https://www.heise.de/newsticker/meldung/Einstweilige-Verfuegung-Vodafone-muss-Kinox-to-sperren-3966023.html");
};

Espero que esto ayude.