Wie zeigen Sie mehrere Dialog-Polyfill?

Question

Ich habe Skript Dialog polyfill zu öffnen:

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

, wenn ich den Skript aufrufen, dialog-Körper mit neuer URL ersetzt wurde anstelle neuen Dialog erstellen. Wie kann ich mehrere Dialoge erstellen?

EDIT

Mein größtes Problem ist, dass meine Dialoge die gleichen Eltern (Anrufer) hat, so im Dialog polyfill js Bibliothek gibt Skript ist zu prüfen, ob es Dialoge sind oder nicht in geordneten Dokument, wenn ja, dann werfen Failed to execute showModal on dialog: The element is already open, and therefore cannot be opened modally.

EDIT

ich die jsfiddle erstellt haben warnen, aber ich weiß nicht, wie von jsfiddle externen Website aufrufen. https://jsfiddle.net/godofrayer/gvLpLjkq/

Answer 1

Ich habe Ihr Beispiel ein wenig modifiziert und jetzt können Sie mehrere Dialoge öffnen. Das Problem war die getElementById. Eine ID muss in einem Dokument eindeutig sein. Also habe ich die Dialoge in einem Array organisiert und die ID-elemets haben den Index des Arrays am Ende der ID id="dialog-close'+dlgIndex+'".

Meine Modifikation ist here

Hier können Sie die wichtigsten Änderungen sehen.

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"); 
}; 

Hoffe das hilft.