JSFiddle - React, Tailwind, and code Playground

HTML

<div id="modal">
  Добрый день. Подскажите пожалуйста, как можно реализовать такое модальное окно, которое при открытии будет скроллиться. В модальном окне будет некое подобие статьи, с текстом и картинками (заказчик не хочет выносить это в новую страницу). Важно, чтобы окно открывалось на определенном расстоянии от верха экрана вне зависимости от того, в каком месте сайта находится пользователь. И ещё важно, чтобы при открытии окна скролл главной страницы отключался, т.к. пользователь будет скроллить окно.

  Я знаю, что я должна была гуглить, а не задавать вопросы на Хабре, но в гугле все не то ((((

  Может, у кого-нибудь есть ссылка на то, что мне надо?

  Добрый день. Подскажите пожалуйста, как можно реализовать такое модальное окно, которое при открытии будет скроллиться. В модальном окне будет некое подобие статьи, с текстом и картинками (заказчик не хочет выносить это в новую страницу). Важно, чтобы окно открывалось на определенном расстоянии от верха экрана вне зависимости от того, в каком месте сайта находится пользователь. И ещё важно, чтобы при открытии окна скролл главной страницы отключался, т.к. пользователь будет скроллить окно.

  <img src="https://img.discogs.com/ro4upLFLoeuPW5pM1sg_QC515G8=/fit-in/300x300/filters:strip_icc():format(jpeg):mode_rgb():quality(40)/discogs-images/A-6526371-1528440841-8589.jpeg.jpg">
  <br>

  Я знаю, что я должна была гуглить, а не задавать вопросы на Хабре, но в гугле все не то ((((

  Может, у кого-нибудь есть ссылка на то, что мне надо?


</div>

CSS

body {
  margin: 0;
  background: crimson;
}

#modal {
  background: white;
  position: absolute;
  width: 70%;
  top: 3rem;
  left: 15%;
  box-sizing: border-box;
  padding: 1rem;
  border: 1px solid black;
  height: 60vh;
  overflow-y: scroll;
  text-align: center;
}