Как показать несколько диалоговых окон polyfill?
У меня есть script, чтобы открыть диалог polyfill:
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">×</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';
};
когда я вызываю это script, диалоговое тело заменено новым url, вместо этого создаст новый диалог. Как создать несколько диалоговых окон?
ИЗМЕНИТЬ
Моя самая большая проблема заключается в том, что мои диалоги имеют один и тот же родительский (вызывающий), поэтому в диалоговом окне polyfill js library, там script, чтобы проверить, есть ли диалоги или нет в родительском документе, если да, то бросить предупреждение Failed to execute showModal on dialog: The element is already open, and therefore cannot be opened modally.
ИЗМЕНИТЬ
Я создал jsfiddle, но я не знаю, как вызвать внешний исходный веб-сайт из jsfiddle. https://jsfiddle.net/godofrayer/gvLpLjkq/