Làm thế nào để hiển thị nhiều hộp thoại chèn lấp?

Question

Tôi có kịch bản để mở polyfill thoại:

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

khi tôi gọi đây là kịch bản, thoại thân bị thay thế bằng url mới thay vì tạo ra hộp thoại mới. Làm thế nào tôi có thể tạo nhiều hộp thoại?

EDIT

Vấn đề lớn nhất của tôi là các hộp thoại của tôi có cùng một mẹ (gọi), do đó trong thư viện polyfill thoại js, có kịch bản để kiểm tra xem có các hộp thoại hay không trong tài liệu phụ huynh, nếu có, sau đó ném cảnh báo Failed to execute showModal on dialog: The element is already open, and therefore cannot be opened modally.

EDIT

tôi đã tạo ra jsfiddle, nhưng tôi không biết làm thế nào để gọi trang web nguồn bên ngoài từ jsfiddle. https://jsfiddle.net/godofrayer/gvLpLjkq/

Answer 1

Tôi đã sửa đổi bạn ví dụ một chút và bây giờ bạn có thể mở nhiều hộp thoại. Sự cố là getElementById. Một id phải là duy nhất trong một tài liệu. Vì vậy, tôi đã tổ chức các hộp thoại trong một mảng một ID-elemets có chứa chỉ mục của mảng ở cuối id id="dialog-close'+dlgIndex+'".

Sửa đổi của tôi là here

Tại đây bạn có thể thấy những thay đổi chính.

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

Hy vọng điều này sẽ hữu ích.