JSFiddle - React, Tailwind, and code Playground

by Abner Rodrigues

HTML

<div id="root">
  <h1>
    Este site é bem legal
  </h1>
  <p>
    Agora tem um modal diferentão
  </p>
  
  <button id="btn__abrir_modal">
    Abrir Modal
  </button>
  
  <div id="modal">
    <div id="backdrop">
    </div>
    <div id="modal-content">
      <h1>
        Modal Informativo
      </h1>
      <p>
        Este é um modal diferentão, tenta clicar fora do modal pra ver se você consegue fechar ele.
      </p>
      <button onclick="closeModal()">
        Ok, legal!
      </button>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#root {
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: sans-serif;
  padding: 2em;
}

#root button {
  cursor: pointer;
}

#root #btn__abrir_modal {
  color: #fff;
  background: rgb(73, 128, 237);
  border: 1px solid rgba(0, 0, 0, .1);
  width: 150px;
  font-weight: 600;
  margin-top: 10px;
  padding: 10px;
  border-radius: 4px;
}

#modal {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
}

#backdrop {
  background: rgba(0, 0, 0, .7);
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(4px);
}

#modal-content {
  display: flex;
  flex-direction: column;
  background: #fff;
  z-index: 2;
  margin: auto;
  width: 300px;
  /* padding: 1em 1.5em; */
  border-radius: 20px;
}

#modal-content h1 {
  font-size: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  padding: 10px 20px;
}

#modal-content p {
  font-size: 14px;
  padding: 10px 20px;
}

#modal-content button {
  color: rgb(73, 128, 237);
  background: transparent;
  border: 0;
  padding: 10px;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

JavaScript

const modal = document.getElementById("modal");
const btnOpenModal = document.getElementById("btn__abrir_modal");
const backdrop = document.getElementById("backdrop");

backdrop.addEventListener("click", () => {
	closeModal();
});

btnOpenModal.addEventListener("click", () => {
	openModal();
});

function openModal(){
	modal.style.display = "flex";
}

function closeModal(){
	modal.style.display = "none";
}