. . .

Всплывающие окна

17 Июнь 2019

Одним из повсеместно употребляемых элементов являются всплывающие окна или popup-окна. Как правило они содержат в себе либо какую-то рекламную информацию, либо элементы формы для отправки данных, например форма заказа звонка. Мы создадим как раз форму для заказа звонка.

HTML-разметка:

<button id="popup-open">Заказать звонок</button>
<div id="popup-window">
    <div id="popup-block">
        <span id="popup-close">Х</span>
        <h4>Заказать звонок</h4>
        <input type="text" placeholder="Имя">
        <input type="text" placeholder="Телефон">
        <input type="submit" value="Отправить">
    </div>
</div>

Разберем этот блок поподробнее. Сначала идет кнопка, на которую будет завязано появление формы. Главный блок с id popup-window будет роль фонового заполнителя, который полностью закрывает все элементы сайта собой. Далее идет блок popup-block, он будет содержать в себе всю интересующую нас информацию: заголовок, поля ввода информации, кнопку отправить и кнопку закрытия формы popup-close.

Теперь можно оформить стили в соответствии со всеми вышеописанными требованиями. Чтобы он не мешал нам, на главный блок popup-window будет сразу наложен display: none.

#popup-open {
    background-color: darkred;
    color: #fff;
    padding: 15px 25px;
    border: none;
    cursor: pointer;
}
#popup-window {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0, .6);
    z-index: 50;
    display: none;
}
#popup-block {
    width: 30%;
    box-sizing: border-box;
    position: relative;
    margin-top: 100px;
    margin-left: 35%;
    text-align: center;
    padding: 15px;
    background-color: darkred;
}
#popup-block #popup-close {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
    cursor: pointer;
}
#popup-block h4 {
    font-size: 20px;
    color: #fff;
}
#popup-block input {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin-top: 20px;
    border: none;
    padding: 15px 20px;
    background-color: #fff;
}
#popup-block input[type=submit] {
    border: none;
    background-color: #555;
    color: #fff;
}

Получилось достаточно громоздко, но это действительно необходимо для большей наглядность и аккуратности результата. На данном этапе у нас отображается просто кнопка:

Разметка и оформление готовы, стало быть пришло время для javascript. Тут все достаточно просто, будет две простых функции, которые снова добавляют и убирают класс.

//находим кнопку заказа звонка, добавляем на нее функцию по клику
document.getElementById('popup-open').onclick = function () {
    //добавляем главному блоку класс popup-window-opened
    document.getElementById('popup-window').classList.add('popup-window-opened');
}
//находим кнопку закрытия окна, добавляем на нее функцию по клику
document.getElementById('popup-close').onclick = function () {
    //убираем класс popup-window-opened у главного блока
    document.getElementById('popup-window').classList.remove('popup-window-opened');
}

Функции готовы, осталось только добавить стили на созданный нами класс popup-window-opened:

.popup-window-opened {
    display: block !important;
}

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

<button id="popup-open">Заказать звонок</button>
<div id="popup-window">
    <div id="popup-block">
        <span id="popup-close">Закрыть</span>
        <h4 class="popup-inner">Заказать звонок</h4>
        <input type="text" placeholder="Имя" class="popup-inner">
        <input type="text" placeholder="Телефон" class="popup-inner">
        <input type="submit" value="Отправить" class="popup-inner">
    </div>
</div>

И добавим к js-коду функцию, которая отслеживает клики за пределами всплывающего окна и убирает класс, создающий его видимость.

document.getElementById('popup-window1').onclick = function (event) {
    var target = event.target;
    if (target.id != 'popup-block1' && target.className != 'popup-inner') {
        document.getElementById('popup-window1').classList.remove('popup-window-opened');
    }
}

Теперь всплывающее окно работает так, как нужно.

Посмотреть на github