Показать сообщение отдельно
  #3 (permalink)  
Старый 02.09.2013, 18:37
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Вот могу дать быстрый вариант, не очень хорошо сделан, но работает:
<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>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 04.09.2013 в 16:35.
Ответить с цитированием