HTML

---

<button type="button" name="button" data-bs-toggle="modal" data-modal-target="open-modal-id">open modal</button>

<div class="modal" id="open-modal-id">
  <div class="modal-content">
    <button type="button" name="button"  name="button" data-bs-dismiss="modal">close</button>
  </div>
</div>

※data-modal-targetとmodalのidは一致させること！

CSS

---

.modal{
  opacity: 0;
  visibility: hidden;
  background: rgba(0,0,0,0.5);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100vw;
  height: 100vh;
  transition: top 0.3s ease-out;
  z-index: 1080;
}
.modal-active{
  opacity: 1;
  visibility: visible;
}
.modal-content{
  position: relative;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 0.5rem;
  background: white;
  border-radius: 0.3rem;
  width: 80%;
  max-width: 500px;
  transition: top 0.6s ease-out;
  box-sizing: border-box;
}

JavaScript

---

document.addEventListener("click", function(e) {
  if(e.target.getAttribute("data-bs-toggle") == "modal") {
    var target = e.target.getAttribute("data-modal-target");
    var targetModal = document.getElementById(target);
    targetModal.classList.add("modal-active");

    targetModal.querySelector('.modal-content').style.top = "50%";
  } else if (e.target.getAttribute("data-bs-dismiss") == "modal") {
    var target = document.getElementsByClassName("modal-active")[0];
    target.querySelector('.modal-content').style.top = "30%";

    setTimeout(function() {
      target.classList.remove("modal-active");
    }, 300);
  }
});