<main>
  <div class="modal">
    <button class="button-close-modal">X</button>
    <h2>Modal Window</h2>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit ea consequuntur aperiam. Accusamus vel nihil exercitationem. Dolorum, consectetur vitae voluptas maxime dolor laudantium voluptate incidunt. Odit voluptates architecto ut ipsa.</p>
    <p>Iure nam quidem sint nulla quia assumenda laborum rem soluta, architecto accusamus quam cupiditate? Architecto nulla debitis deserunt blanditiis odio, magnam aspernatur neque eum perferendis ad iste perspiciatis, distinctio harum?</p>
    <p>Commodi quam sit accusamus eum amet molestiae et ipsam id vitae reiciendis? Quae id expedita, dolor fugiat officia dolores eveniet officiis enim, sit velit nihil error recusandae debitis suscipit eum.</p>
    <p>Deleniti porro molestias labore assumenda iure, animi magnam, odit, rem quasi nobis minima accusantium sint nostrum eaque veniam modi impedit earum exercitationem tempore voluptatum eius. Suscipit, adipisci quo. Et, voluptate!</p>
    <p>Consequuntur rem omnis molestiae praesentium, quo minus, dicta, eaque vitae similique aut atque in reiciendis voluptatem iste magnam. Facilis ab debitis dolore dolorum quas voluptate soluta tempore assumenda culpa beatae!</p>
  </div>
</main>
<button class="btn">toggle modal</button>

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  display:none;
  background: #fff;
  height: 100px;
  width: 300px;
  position: absolute;
  float: left;
  left: 50%;
  top: 0%;
  transform: translate(-50%, 50%);
  overflow:hidden;
  overflow-y:scroll;
  border:1px solid #0005;
  border-radius:.5rem;
  padding:.5rem;
  box-shadow: 1px 1px 3px 0 #0003;
  transition: all 5s;
}

.modal h2 {
  font-family: sans-serif;
  font-size: 1.2rem;
  text-align: center;
  padding: 0 0 0.3rem 0;
}
.modal p {
  text-align: justify;
}

.button-close-modal {
  display: block;
  position: relative;
  top: 0;
  font-size: 1rem;
  font-weight: bold;
  margin-left: auto;
  border: 1px solid #0003;
  border-radius: .3rem;
}

.hidden {
  display:none;
}

.btn {
  padding: 0.5rem;
  border: 1px solid #000;
  background: #f333;
}

let modal = document.querySelector(".modal");
 
document.addEventListener(
  "click",
  function(event) {
    modal.scrollTop = 0;
    if (
      event.target.matches(".button-close-modal") ||
      !event.target.closest(".modal")
    ) {
      closeModal()
    }
    if (event.target.matches(".btn")) {
      showModal();
      if (modal.scrollTop < modal.scrollHeight) {
      setInterval( function() {
        modal.scrollTop += 1;
      }, 10);
      }
    }
  },
  false
)

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

function showModal() {
  document.querySelector(".modal").style.display = "block";
}

document.querySelector(".btn").onclick = () => {
  showModal();
}