Сниппет создания модального окна

Придумал для себя интересное решения, для добавления модальных окон. Иначе мне приходилось часто их верстать и программировать с нуля. А тут, собственно, написан основной код для функциональности. Далее, уже на месте можно его доработать под проект. Должно получаться быстрее.

HTML

<div class="popup-layer"></div>
<div class="popup">
	<button class="popup__close button button_close">×</button>
	<div class="popup__body">
		<p class="popup__title">Заголовок модального окна</p>
		<p class="popup__text">Какой-то текст для данного модального окна</p>
		<!-- 	Любое содержимое, например форма	 -->
	</div>
</div>

<button onclick="popup.show('Оставьте заявку')">Оставить заявку</button>
<hr>
<button onclick="popup.show('Выберите тему')">Выбрать тему</button>
<hr>
<button onclick="popup.show('Сыграйте в игру')">Сыграть в игру</button>

В коде HTML указана минимальная разметка для вставки модального окна. Данную разметку нужно разместить, как обычно после футера, ближе к закрывающему тегу body, но до вызова js. Кнопки для демонстрации — они скорее всего не понадобятся, просто показана возможность менять Заголовок модального окна.

CSS

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin: auto;
  background-color: #fff;
  transition: 300ms;
  opacity: 0;
  z-index: 500;
  pointer-events: none;
  box-shadow: 0 0 32px #00000022;
  border: 1px solid #00000011;
  border-radius: 8px;
  overflow: clip;
}
.popup-layer {
  opacity: 0;
  position: fixed;
  z-index: 400;
  inset: 0;
  background-color: #00000033;
  backdrop-filter: blur(8px);
  pointer-events: none;
  transition: 300ms;
}
.popup-layer.show {
  opacity: 1;
  pointer-events: all;
}
.popup__body {
  position: relative;
  background-color: #fff;
  z-index: 1;
  max-width: 450px;
  padding: 32px;
}
.popup__body :where(*) {
  margin: 0;
}
.popup__title {
  margin-bottom: 16px;
  line-height: 1;
  font-size: 2rem;
  font-weight: 800;
}
.popup__text {
  line-height: 1.4;
  font-size: 0.9rem;
  font-weight: 400;
}
.popup.show {
  opacity: 1;
  pointer-events: all;
}
.popup__close {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 4px;
  border-radius: 4px;
}
.popup .button_close {
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 28px;
}

Стили CSS написаны с базовыми настройками модального окна. Учтена плавность, положение и минимально нормальный внешний вид. Конечно, когда будет добавляться контент, то стили нужно дописать.

JavaScript

class ModalPopup{
	constructor(selector){
		this.popup = document.querySelector(selector);
		this.popupTitle = this.popup.querySelector('.popup__title');
		this.defaultPopupTitle = this.popupTitle.textContent;
		this.closeBtn = this.popup.querySelector('.button_close');
		this.popupLayer = document.querySelector('.popup-layer');
		this.closeBtn.addEventListener('click', ()=>{
			this.close();
		});
		if(this.popupLayer){
			this.popupLayer.addEventListener('click', ()=>{
				this.close();
			});
		}
	}
	
	show(popupTitle = this.popupTitle.textContent){
		this.popup.classList.add('show');
		this.popupTitle.textContent = popupTitle;
		if(this.popupLayer){
			this.popupLayer.classList.add('show');
		}
	}
	close(){
		this.popup.classList.remove('show');
		if(this.popupLayer){
			this.popupLayer.classList.remove('show');
		}
		setTimeout(()=>{
			this.popupTitle.textContent = this.defaultPopupTitle;			
		},500);
	}
}
let popup = new ModalPopup('.popup');

Ну и самое главное — JavaScript. В скрипте представлен класс модального окна, с помощью которого в общем-то и создается функционал окна. Прописаны два основных метода — show() и close()

На Codepen работает! Пробуем применять в работе)