JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<button id="btn-modal">модалка</button>
<div id="modal-window"><div id="content">Контент</div></div>

CSS

html, body {
	margin: 0;
	padding: 0;
}
#modal-window {
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	display: none;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, .6);
}
#content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 100px;
	background: rgba(255, 255, 255, 1);
}
.show {
	display: block!important;
}

JavaScript

let opModal = {
  modal: document.getElementById(`modal-window`),
  events: {
    click: evt => this.modal.classList[
				evt.target.id === `btn-modal` ? `add` :
				evt.target.id === `modal-window` &&
      evt.target.id !== `content` ? `remove` : `add`
				](`show`),
  },
};

document.addEventListener(`click`, opModal.events.click);