<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, corporis nulla saepe magnam provident corrupti dolores earum, maxime blanditiis dicta est esse, exercitationem numquam nisi vitae officia dolor labore facilis.</p>
<p>Minima, optio fugit fugiat quae, minus rem veritatis, porro laboriosam deserunt perferendis ducimus. Consequatur quasi beatae placeat pariatur commodi asperiores ab. Similique quaerat dicta, cupiditate fuga consectetur necessitatibus quam sunt.</p>
<p>Minus, cum qui! Iste fugiat natus harum? Et magnam, ipsum blanditiis dolores commodi corporis quos a in modi nisi, odio labore tempora explicabo vero voluptatum sapiente nobis quae perferendis asperiores?</p>
<p>Error debitis aliquid commodi veniam provident voluptas fugiat possimus exercitationem eligendi minima amet omnis quam, id numquam cupiditate libero aspernatur assumenda eum animi quos obcaecati dolores placeat consectetur. Voluptate, error!</p>
<p>Sequi quos mollitia consectetur earum quam harum natus, voluptas incidunt! Quam asperiores facilis enim, perspiciatis eligendi est excepturi corporis ad velit consequuntur pariatur officiis debitis necessitatibus, harum laboriosam voluptas explicabo.</p>
<p>Ipsum minus doloremque nesciunt minima, repudiandae officiis earum. Maxime quasi dolores explicabo nam illo quam nostrum sed similique, voluptatum aliquid vero quis repudiandae repellat labore unde quos iusto tempore ut?</p>
<p>Consectetur, eius? Pariatur quam fugit dicta sapiente vitae qui iure distinctio amet. Officia soluta fugiat qui eveniet. Pariatur blanditiis, dignissimos vero iure accusantium id tempore, veritatis cum quod quis explicabo.</p>
<p>Ullam repudiandae veritatis, quasi rem, error nostrum nam ratione eius tempore rerum vero distinctio minima. Facere illo ipsum dolores, laboriosam, reiciendis earum iste corrupti veniam aut accusantium debitis maxime nulla.</p>
<p>Quasi, deserunt et eligendi iste dicta unde, corporis dolorum aspernatur ullam nihil voluptas quidem animi repudiandae in ipsum molestiae sequi tenetur officia sapiente explicabo? Quasi nostrum blanditiis itaque ad alias!</p>
<p>Distinctio, nesciunt quos. Fuga optio accusamus nobis sunt delectus quam aut repudiandae. Eligendi et dicta quis iste! Temporibus beatae quasi, quae iste exercitationem maiores cumque dolorum quibusdam placeat, eligendi ex!</p>
<p>Eaque corrupti magnam vero eveniet, porro ab est minima nostrum nihil alias quis reprehenderit quo! Velit necessitatibus dicta sunt asperiores a, ab iure perspiciatis, amet temporibus illo tempora nostrum porro.</p>
<p>Nesciunt quod voluptatem aliquid, sed facilis minus eos consequuntur adipisci at fugit consequatur accusamus magnam totam! Temporibus doloribus voluptas ipsam, aspernatur quia enim quod, rerum animi debitis consectetur quae aliquam!</p>
<p>Ipsa, hic excepturi. Voluptatibus ullam quod illum ipsa, sit eaque a quisquam iste fugit cupiditate nobis quae, quis explicabo magni, asperiores quaerat minima delectus. Aperiam laboriosam non reprehenderit doloribus soluta.</p>
<p>Placeat quos corporis eius tempore neque maiores non velit cumque? Nulla, ipsa? Sint et a neque esse optio porro quasi, necessitatibus hic exercitationem asperiores praesentium cumque distinctio nam, tenetur minus.</p>
<p>Unde obcaecati sapiente modi doloremque vel similique placeat mollitia velit magnam suscipit distinctio nisi consectetur quidem, iure incidunt fugiat eius at sit sint blanditiis quo dicta nostrum enim ex! Obcaecati.</p>
<p>At quibusdam eveniet nesciunt tempore, laboriosam amet quae sint placeat optio in quisquam nam necessitatibus aspernatur praesentium odio cum ipsam facilis qui, explicabo nemo enim! Quibusdam sequi excepturi aut modi.</p>
<p>At reiciendis odio dolorum deleniti, dolores qui nulla voluptatem mollitia voluptatibus dolorem dolor reprehenderit tenetur quo quisquam ex omnis ab blanditiis! At autem, tempora molestias et vitae natus fuga hic.</p>
<p>Aliquam cupiditate praesentium magnam laboriosam illo! Aspernatur, praesentium recusandae eaque at asperiores, maiores suscipit accusantium consequatur reprehenderit magni ex voluptatem ratione doloribus aliquid ipsa numquam nam ipsam consequuntur culpa incidunt!</p>
<p>Consectetur, velit tenetur nulla dolores consequatur labore nemo. Necessitatibus, odit a ab assumenda fugit omnis consectetur, hic libero aliquid esse vitae. Odio similique optio, harum ipsam a est eius facilis?</p>
<p>Illum harum sit cumque earum placeat. Autem eos modi numquam dolore tempore sint similique amet iste. Dolorum fugit debitis incidunt ipsum tempore asperiores ab ea laborum, praesentium molestiae cum voluptates.</p>

<button id="toggle-modal">
  Toggle Modal
</button>

<div id="modal">
  <h1>Modal</h1>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, quos. Itaque, culpa accusantium? Minima et est iusto voluptate at explicabo laudantium quidem ipsum eligendi! Placeat repudiandae molestias at consectetur ipsum.</p>
</div>

body {
  font: 125%/1.4 system-ui;
  padding: 2rem;
}

#modal {
  position: fixed;
  top: 50%;
  left: 50%;
  background: white;
  border: 2px solid black;
  max-width: 600px;
  transform: translate(-50%, -50%);
  padding: 2rem;
  display: none;
  &.is-open {
    display: block;
  }
}

#toggle-modal {
  position: fixed;
  top: 5px;
  right: 5px;
}

@media only screen and (min-width: 992px) {
  body {
    --widthReflow: 15px;
  }
}
@media only screen and (max-width: 991px) {
  body {
    --widthReflow: 0px;
  }
}

const toggleModalButton = document.querySelector("#toggle-modal");
const modal = document.querySelector("#modal");

toggleModalButton.addEventListener("click", () => {
  modal.classList.toggle("is-open");

  if (modal.classList.contains("is-open")) {
    document.body.style =
      "overflow-y:hidden; position: relative; margin-right: var(--widthReflow);";
  } else {
    document.body.style =
      "overflow-y:visible; position: static; margin-right: 0;";
  }
});