JSFiddle - React, Tailwind, and code Playground

by Tema Kiryanov

HTML

<button class="btn_modal">Специально для Максима Иванова</button>
<div class="popup">
	<div class="modal_pizdec">
        <span>Ваш логин</span>
        <br>
        <input type="text" placeholder="Логин" required="Вы не ввели логин">
        <br>
        <span>Ваш пароль</span>
        <br>
        <input type="password" placeholder="Пароль" required="Вы не ввели пароль">
        <br>
        <button class="mess" type="submit">Отправить</button>
        </div>
	<button class="close">&times;</button>
</div>
<div class="overlay"></div>

SCSS

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
	transition: all 0.3s ease;
	opacity: 0;
	visibility: hidden;
	&.open {
		visibility: visible;
		opacity: 1;
	}
}

.popup {
	z-index: 11;
	position: fixed;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0 15px;
	max-width: 700px;
	width: calc(50% - 16px);
	max-height: 90vh;
	padding: 40px;
	background-color: white;
	transition: all 0.5s ease;
	opacity: 0;
	visibility: hidden;
	&.open {
		visibility: visible;
		opacity: 1;
	}
}
.popup.open {
    position: relative;
    background-color: #4451BAFF;
    padding: 150px 70px;
    border: 1px solid #000;
    border-radius: 30px;
}

input {
  padding: 8px 10px;
  margin-top: 10px;
  margin-bottom: 5px;
}

span {
  font-size: 18px;
  font-family: fantasy;
}
.close {
	font-size: 20px;
	position: fixed;
	top: 10px;
	right: 10px;
}

JavaScript

var openModal = document.querySelector('.btn_modal'),
    modal = document.querySelector('.popup'),
    overlay = document.querySelector('.overlay'),
    close = document.querySelector('.close');

openModal.onclick = function() {
	modal.classList.add('open');
	overlay.classList.add('open');
}

close.onclick = function() {
	modal.classList.remove('open');
	overlay.classList.remove('open');
}

overlay.onclick = function() {
	modal.classList.remove('open');
	this.classList.remove('open');
}