Модальные окошки на голом JavaScript

В графическом интерфейсе пользователя модальным называется окно, которое блокирует работу пользователя с родительским приложением до тех пор, пока пользователь это окно не закроет.

Давайте решим, что нам нужно будет сделать:

• Создать блокирующий фон
• Определиться с позицией
• Показать диалоговое окно
• Закрыть диалоговое окно

Создадим объект modalWindow в JavaScript, который будет иметь два свойства. По умолчанию они ничему не равны.
_block — содержит HTML-элементы блокирующего фона
_win — содержит HTML-элементы диалогового окна

Теперь немного о методах объекта modalWindow:
initBlock() — инициализация и появление блокирующего фона
initWin(width, html) — инициализация диалогового окна, где width — ширина модального окна и html — html-текст, располагаемый в нашем окне
close() — закрыть модальное окно
show() — показать модальное окно

Наш принцип инициализации двух элементов — создать, если не был создан. В противном случае просто показать.

Приступим к написанию кода:

var modalWindow = {
    _block: null,
    _win: null,

Теперь идем по порядку… Метод инициализации блокирующего фона:

initBlock: function() {
        _block = document.getElementById('blockscreen'); //Получаем наш блокирующий фон по ID

        //Если он не определен, то создадим его
        if (!_block) {
            var parent = document.getElementsByTagName('body')[0]; //Получим первый элемент тега body
            var obj = parent.firstChild; //Для того, чтобы вставить наш блокирующий фон в самое начало тега body
            _block = document.createElement('div'); //Создаем элемент div
            _block.id = 'blockscreen'; //Присваиваем ему наш ID
            parent.insertBefore(_block, obj); //Вставляем в начало
            _block.onclick = function() { modalWindow.close(); } //Добавим обработчик события по нажатию на блокирующий экран - закрыть модальное окно.
        }
        _block.style.display = 'inline'; //Установим CSS-свойство        
    },

Метод инициализации диалогового окна:

 initWin: function(width, html) {
        _win = document.getElementById('modalwindow'); //Получаем наше диалоговое окно по ID
        //Если оно не определено, то также создадим его по аналогии
        if (!_win) {
            var parent = document.getElementsByTagName('body')[0];
            var obj = parent.firstChild;
            _win = document.createElement('div');
            _win.id = 'modalwindow';
            _win.style.padding = '0 0 5px 0';
            parent.insertBefore(_win, obj);
        }
        _win.style.width = width + 'px'; //Установим ширину окна
        _win.style.display = 'inline'; //Зададим CSS-свойство
        
        _win.innerHTML = html; //Добавим нужный HTML-текст в наше диалоговое окно
        
        //Установим позицию по центру экрана

        _win.style.left = '50%'; //Позиция по горизонтали
        _win.style.top = '50%'; //Позиция по вертикали

        //Выравнивание по центру путем задания отрицательных отступов
        _win.style.marginTop = -(_win.offsetHeight / 2) + 'px'; 
        _win.style.marginLeft = -(width / 2) + 'px';
    },

Метод закрытия модального окна:

 close: function() {
        document.getElementById('blockscreen').style.display = 'none';
        document.getElementByIdt('modalwindow').style.display = 'none';        
    },

Метод появления модльного окна:

 show: function(width, html) {
        modalWindow.initBlock();
        modalWindow.initWin(width, html);
    }

 }//Конец описания нашего объекта

Теперь зададим стили для нашего блокирующего фона и диалогового окна в CSS:

#blockscreen, #modalwindow {
    position: fixed;
}
#blockscreen {
    background: rgba(0, 0, 0, .5);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
}
#modalwindow {
    z-index: 11;
    background: #fff;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #a1a1a1;
    box-shadow: 0 0 10px #444;
    
}

Теперь дописываем к нужному элементу событие onclick

<div onclick="modalWindow.show([width], [html-текст])">open</div>

Демо