В графическом интерфейсе пользователя модальным называется окно, которое блокирует работу пользователя с родительским приложением до тех пор, пока пользователь это окно не закроет.
Давайте решим, что нам нужно будет сделать:
Создадим объект modalWindow в JavaScript, который будет иметь два свойства. По умолчанию они ничему не равны.
_block — содержит HTML-элементы блокирующего фона
_win — содержит HTML-элементы диалогового окна
Теперь немного о методах объекта modalWindow:
initBlock() — инициализация и появление блокирующего фона
initWin(width, html) — инициализация диалогового окна, где width — ширина модального окна и html — html-текст, располагаемый в нашем окне
close() — закрыть модальное окно
show() — показать модальное окно
Наш принцип инициализации двух элементов — создать, если не был создан. В противном случае просто показать.
Приступим к написанию кода:
Теперь идем по порядку… Метод инициализации блокирующего фона:
Метод инициализации диалогового окна:
Метод закрытия модального окна:
Метод появления модльного окна:
Теперь зададим стили для нашего блокирующего фона и диалогового окна в CSS:
Теперь дописываем к нужному элементу событие onclick
Демо
Давайте решим, что нам нужно будет сделать:
- Создать блокирующий фон
- Определиться с позицией
- Показать диалоговое окно
- Закрыть диалоговое окно
Создадим объект 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>
Демо