Данный попап открывается при добавлении к элементу #popup класса .open. Непосредственно сам попап – это элемент с классом .popup_block, а обёртка нужна, чтобы затемнять страницу при его открытии и для выравнивания попапа по центру страницы, а если он не будет помещаться в окно (например на мобильных устройствах) то будет появляться вертикальный скролл.
HTML
<div id="popup" class="popup-bg"> <div class="popup__container"> <div class="popup__block"> <div class="popup__close"></div> </div> </div> </div>
CSS
.popup__close { position: absolute; top: 10px; right: 10px; display: block; width: 25px; height: 25px; cursor: pointer; z-index: 10; } .popup__close::before, .popup__close::after { content: ''; position: absolute; top: 50%; left: -3px; display: block; width: 27px; height: 2px; background-color: #9ea1a7; } .popup__close::before { transform: translate(0,-2px) rotate(45deg); } .popup__close::after { transform: translate(0,-2px) rotate(-45deg); } .popup-bg { opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.8); z-index: 99; transition: .3s all; } .popup-bg.open { opacity: 1; pointer-events: auto; } .popup__container { width: 100%; max-height: 100%; overflow-y: auto; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .popup__block { position: relative; margin: 0 auto; width: 100%; max-width: 500px; padding: 40px 15px 20px; }
Script
document.querySelector('.open-popup-button').addEventListener('click',function(){ document.querySelector('#popup').classList.add('open'); }); document.querySelector('.popup__close').addEventListener('click',function(){ document.querySelector('#popup').classList.remove('open'); });
Тут могла быть ваша реклама.