Страницы Интернета

Модальное окно с прокруткой

<!-- CSS прописать один раз -->

.lightbox1 {
  display: none;
}
.lightbox1 + label {  /* надпись "образец" */
  border-bottom: 1px dashed;
  cursor: zoom-in;
}
.lightbox1 + label + * {  /* коробка */
  visibility: hidden;
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background: rgba(0,0,0,.5);
  text-align: center;
  line-height: 100vh;
}
.lightbox1:checked + label + * {
  visibility: visible;
}
.lightbox1 + label + * > * {  /* position: absolute; как-то странно себя ведёт в родителе с position: fixed;, поэтому была задействована ещё одна обёртка */
  position: relative;
}
.lightbox1 + label + * > * > :first-child {  /* кликабельный фон */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: zoom-out;
}
.lightbox1 + label + * > * > :last-child {  /* блок с окном */
  position: relative;
  display: inline-block;
  max-width: calc(100% - (8px + 2px)*2);
  margin: 8px;
  border: 2px solid rgb(51, 103, 153);
  box-shadow: 0 0 0 8px rgba(255,255,255,.2);
  background: #fff;
  text-align: left;
  line-height: normal;
  vertical-align: middle;
}
.lightbox1 + label + * > * > :last-child > :first-child {  /* заголовок */
  position: relative;
  padding: .5em 4em .5em .5em;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  text-overflow: ellipsis;
  color: #fff;
  background: linear-gradient(#669acc 50%, #5589bb 50%);
}
.lightbox1 + label + * > * > :last-child > :first-child label {  /* крестик "закрыть" */
  position: absolute;
  top: calc(.5em - 2px);
  right: calc(.5em - 2px);
  font-weight: 600;
  cursor: pointer;
}
.lightbox1 + label + * > * > :last-child > :last-child {  /* поле после заголовка */
  padding: .5em;
}
.lightbox1 + label + * > * > :last-child > :last-child label {
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.lightbox1 + label + * label > button {
  position: relative;
  z-index: -1;
}

<!-- input, label и div идут друг за другом, между ними не должно быть других тегов. for тот же, что и id.
id должен использоваться на странице только единожды. То есть, чтобы создать несколько всплывающих элементов, нужно всем input задать один класс lightbox, но разные id. -->
<input type="checkbox" id="dva" class="lightbox1"/>
<label for="dva">образец</label>
<div><div>
  <label for="dva"></label>
  <div>
    <div>Название<label for="dva">✖</label></div>
    <div>Модальное окно для большого содержания</div>
  </div>
</div></div>

<!-- пока красивого решения убрать скролл body я не вижу. Могу предложить в input добавить обработчик событий JavaScript -->
<script>
var inp = document.getElementsByClassName('lightbox1');
for (var i = 0; i < inp.length; i++) {
  inp[i].onclick = function() {
    document.documentElement.style.overflow=(this.checked ? 'hidden' : 'auto');
    document.documentElement.style.marginRight=(this.checked ? '17px' : '');
  }
}
</script>