Как создать всплывающее окно (попап)?

Приветствую, друзья, сегодня будем создавать с вами попап (модальное окно) для сайта на jQuery/CSS. В данном всплывающем окне вы можете разместить что угодно. Например, форму для обратной связи (как в данном примере) или любой другой контент. Вы сможете сверстать в самом окне что угодно. Пример того, как будет выглядеть наш попап, вы можете увидеть на codepen.io кликнув на кнопку ниже:

Оставить заявку

Базовая HTML-структура попап-окна

Для начала, создадим базовую HTML-структуру для нашего модального окна. Она будет состоять из двух частей. Первая — div с классом «popup-bg», который будет использоваться для затемнения остального сайта при открытии попап-окна. Вторая часть — div с классом «popup». Это и будет телом нашего окна, в котором мы будем располагать весь контент. Так же я добавил картинку крестика с классом «close-popup». Данный класс нам понадобиться в будущем для закрывания окна. Картинку я поместил внутрь «popup». Вместо картинки вы можете сделать крестик с помощью CSS.

<div class="popup-bg">
  <div class="popup">
    <img class="close-popup" src="images/close.png" alt="">

  </div>
</div>

Базовый CSS-код

Ниже я приведу базовый CSS-код для затемнения сайта, отображения окна и позиционирования крестика. То есть для базовой структуры любого окна, вне зависимости от контента. Для того, что бы не писать стену текста с объяснением каждой строки, я просто покажу свой код, и оставлю в нем комментарии.

.popup-bg {
    position: fixed; //задаем fixed для того, что бы затемнение было на весь экран, не зависимо от скролла.
    top: 0; // позиция сверху 0
    left: 0; // слева 0
    width: 100%; // ширина 100% экрана
    height: 100%; // высота 100%
    background: rgba(0,0,0,0.8); // фон черный, с прозрачностью 0.8 для затемнения сайта
    display: none; // скрываем по умолчанию, будем показывать при клике
    // на время работы можете не устанавливать это значние, что бы видеть результат
}

.popup {
    position: absolute; // позиционируем само окно абсолютно, относительно фона
    background: #ffffff; // белый фон окна
    width: 400px; // ширина в 400px
    left: 50%; // отступ слева 50%
    top: 50%; // отступ сверху 50%
    transform: translate(-50%, -50%); // иделаьно центрируем
    padding: 30px; // делаем отступы внутрь со всех сторон
    padding-top: 60px; // увеличиваем отступ сверху, что бы крестик не налазил на контент
}

Наконец jQuery-код для открытия и закрытия окна

Дня начала создадим кнопку, при клике на которую мы будет показывать попап.

<a href="#" class="open-popup">Оставить заявку</a>

Далее сам jQuery код. Все максимально просто. Кликаем на класс «open-popup» — окно появляется, кликаем на «close-popup», окно пропадает. Так же в функцию при клике мы передаем e, что бы отследить клик. После чего функция preventDefault() отрубает стандартное поведение при клике на ссылку. Это нужно для того, что бы экран не прыгал вверх при открытии всплывающего окна. Если заменить в кнопке тег «a» на «span» или другой, то эту строчку можно убрать.

$('.open-popup').click(function(e) {
    e.preventDefault();
    $('.popup-bg').fadeIn(800);
});

$('.close-popup').click(function() {
    $('.popup-bg').fadeOut(800);
});

Наш попап готов. Осталось только поместить внутрь контент, и уже стилизовать его. Но можно ли улучшить этот код? Конечно!

Убираем скролл при открытом попап окне.

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

.no-scroll {
    overflow-y: hidden; //Скрываем все, что по высоте не влазит в экран
}

После чего немного модифицируем jQuery код. Будем добавлять/убирать этот класс к тегу html, при открытии или закрытии модального окна соответственно.

$('.open-popup').click(function(e) {
    e.preventDefault();
    $('.popup-bg').fadeIn(800);
    $('html').addClass('no-scroll');
});

$('.close-popup').click(function() {
    $('.popup-bg').fadeOut(800);
    $('html').removeClass('no-scroll');
});

Готовый код для попап окна с формой обратной связи

<a href="#" class="open-popup">Оставить заявку</a>

<div class="popup-bg">
     <div class="popup">
         <img class="close-popup" src="images/close.png" alt="">
         <form action="">
             <input type="text">
             <input type="tel">
             <input value="Отправить заявку" type="submit">
         </form>
     </div>
</div>

.popup-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
}

.popup {
    position: absolute;
    background: #ffffff;
    width: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    padding-top: 60px;
}

.popup form {
    display: flex;
    flex-direction: column;
}

.popup form input {
    margin-bottom: 30px;
    height: 50px;
    font-size: 20px;
    border: 2px solid #000000;
}

.popup form input[type="submit"] {
    background: #000000;
    color: #ffffff;
    font-size: 24px;
}

.close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.no-scroll {
    overflow-y: hidden;
}

$('.open-popup').click(function(e) {
    e.preventDefault();
    $('.popup-bg').fadeIn(800);
    $('html').addClass('no-scroll');
});

$('.close-popup').click(function() {
    $('.popup-bg').fadeOut(800);
    $('html').removeClass('no-scroll');
});

Или вы можете скачать готовый архив, со всеми файлами и картинками, кликнув сюда.

Спасибо что прочитали! Если у вас остались вопросы, возникли проблемы или вы заметили ошибку — пишите в комментариях под этой статьей, постараюсь помочь всем)

Так же предлагаю ознакомиться с другими моими уроками:

1. Анимация при скролле в несколько строк кода
2.Параллакс эффект для фона сайта на чистом CSS