<div class="h-center">
  <button class="modal__open">
    Open modal
  </button>
</div>
<div class="both-center">
  <div class="modal">
    <div class="modal__text">
      <h2 class="modal__title">Modal</h2>
      <p class="modal__paragraph">
        This is a modal
      </p>
    </div>
    <button class="modal__close">
      x
    </button>
  </div>
</div>

*,*::before,*::after{
  margin:0;
  padding:0;
}

.h-center{
  display:flex;
  justify-content:center;
}

.both-center{
  display:none;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background-color:rgb(0,0,0,0.4);
  height:100vh;
  justify-content:center;
  align-items:center;
}

.modal {
  background-color:white;
  width:12rem;
  padding:1rem 1.5rem;
  border:1px solid gray;
  border-radius:6px;
  display:flex;
  align-items:start;
  justify-content:space-between
}

.modal__open{
  border:none;
  border-radius:4px;
  padding:0.5rem 1rem;
  background-color:rgb(0,0,0,0.2)
}

.modal__close{
  padding:0.1rem 0.5rem;
  font-size:1rem;
}


.d-flex{
  display:flex;
}
View Compiled
document.querySelector("body").addEventListener("click",(e) => {
   e.stopPropagation()
  const target = e.target
  const modalContainer = target.closest("body").querySelector(".both-center")
 if(target.classList.contains("modal__open")){
    modalContainer.classList.add("d-flex")
  }
  if(target.classList.contains("modal__close")){
    modalContainer.classList.remove("d-flex")
  }
 
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.