JSFiddle - React, Tailwind, and code Playground

Простое адаптивное

by Ankhena

HTML

<span class="btn">клик</span>
<div class="modal hidden">
<span class="btn">закрыть</span>
  тут текст
</div>

CSS

.btn {
  display: inline-block;
  background: #f00;
  color: #fff;
  padding: 10px;
  margin: 10px;
}
.hidden {
  display: none;
}
.modal {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 50vw;
  height: 50vh;
  background: #fff;
  border: 3px solid skyblue;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
  padding: 20px;
  overflow: auto;
}

JavaScript

$(".btn").click(function() {
	$(".modal").toggleClass("hidden");

})