JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

<div id="overlay">
  <div class="popup">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non vel iusto, quisquam officiis enim maiores, inventore obcaecati eaque, voluptatibus, vitae tenetur facilis culpa necessitatibus? Animi ad expedita quo incidunt deserunt praesentium laborum, iure magnam perspiciatis maxime ab saepe ratione voluptatum sunt, rem recusandae, dignissimos autem voluptate laudantium. Nobis consectetur, quas.<br>
    <span id="close-popup">Закрыть попап</span>
  </div>
</div>
<div class="text">
  <span id="open-popup">Открыть попап</span><br>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, enim, velit. Ipsa, neque? Sapiente, iusto error rerum doloremque placeat cumque est, temporibus itaque nulla aliquam, assumenda laudantium quibusdam facilis molestiae ipsa at? Qui reprehenderit perspiciatis tempora eaque, incidunt eum sed odit mollitia inventore sit! Porro numquam exercitationem, consectetur cum dolorem accusantium pariatur, maxime aperiam odit, fugit consequuntur. Inventore reiciendis commodi obcaecati repudiandae, eum ipsum odio nemo natus, impedit dolorem aspernatur delectus perferendis in molestias non voluptas necessitatibus soluta, sint nostrum deleniti? Laudantium rerum iste iure itaque distinctio accusamus, atque minus enim autem ipsam veritatis tenetur, aspernatur odio, eius provident cum!
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
}
.text {
  background-color: #eee;
  width: 400px;
  margin: 0 auto;
  padding: 10px;
}

#overlay {
  top: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none;
}

.popup {
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  text-align: center;
}

#open-popup, #close-popup {
  cursor: pointer;
  background-color: #fff;
  margin: 20px;
  border: 1px solid #aaa;
  padding: 5px 10px;
  border-radius: 25%;
  display: inline-block;
}

JavaScript

var openBtn = document.getElementById('open-popup');
var closeBtn = document.getElementById('close-popup');
var overlay = document.getElementById('overlay');
openBtn.onclick = function() {
	overlay.style.display = 'block';
}
closeBtn.onclick = function() {
	overlay.style.display = 'none';
}