Вот могу дать быстрый вариант, не очень хорошо сделан, но работает:
<script type="text/javascript">
function multiPrompt(options, callback) {
var wrapper = document.createElement('div');
wrapper.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%;';
wrapper.innerHTML = '<div style="position: fixed; width: 100%; height: 100%; background: #000; opacity: 0.05;' +
'filter: Alpha(opacity=5);"></div><table style="position: relative; margin: auto; height: 100%;"><tr><td>' +
'<div style="position: relative; background: #FBFBFB; border: 1px solid #BFBFBF; border-radius: 4px;' +
'box-shadow: 0 2px 3px rgba(0,0,0,0.6); padding: 10px;"><div></div><div style="padding: 10px 0 0 0;' +
'float: right;"><button style="border: 1px solid #bfbfbf; width: 80px; margin-left: 10px;height: 25px;' +
'">Ок</button><button style="border: 1px solid #bfbfbf; width: 80px; margin-left: 10px; height: 25px;' +
'">Отмена</button></div><div style="clear: both;"></div></div></td></tr></table>';
options = options instanceof Array ? options : [[options]];
var inputsBox = wrapper.getElementsByTagName('div')[2];
for(var i = 0; i < options.length; i++) {
options[i] = options[i] instanceof Array ? options[i] : [options[i]];
var titleDiv = document.createElement('div');
titleDiv.innerHTML = typeof options[i][0] === 'undefined' ? '' : options[i][0];
inputsBox.appendChild(titleDiv);
var input = document.createElement('input');
input.style.minWidth = '300px';
input.style.width = '100%';
input.type = 'text';
input.value = typeof options[i][1] === 'undefined' ? '' : options[i][1];
inputsBox.appendChild(input);
}
var buttons = wrapper.getElementsByTagName('button');
var cancel = function(e) {
e = e || window.event;
if (e.type == 'keydown') {
if (e.keyCode !== 27) {
return;
}
}
if (document.removeEventListener) {
document.removeEventListener('keydown', cancel);
} else {
document.detachEvent('onkeydown', cancel);
}
wrapper.parentNode.removeChild(wrapper);
}
buttons[0].onclick = function() {
var inputs = wrapper.getElementsByTagName('input');
var results = [];
for(var i = 0; i < inputs.length; i++) {
results[results.length] = inputs[i].value;
}
cancel({});
callback && callback(results);
}
buttons[1].onclick = cancel;
if (document.addEventListener) {
document.addEventListener('keydown', cancel);
} else {
document.attachEvent('onkeydown', cancel);
}
document.body.appendChild(wrapper);
}
</script>
<button onclick="multiPrompt(['Имя', 'Фамилия', 'Отчество'], function(a){alert(a)})">Показать окно 1</button>
<button onclick="multiPrompt([['Имя', 'Иван'], ['Фамилия', 'Иванов'], ['Отчество', 'Иванович']], function(a){alert(a)})">Показать окно 2</button>
<button onclick="multiPrompt('Введите число', function(a){alert(a)})">Показать окно 3</button>
|