Как правильно сверстать модальное окно?

431

09 сентября 2018, 15:30

Написал тестовое модальное окно, но возникла проблема.

Допустим, произошло какое-то событие (например клик) и появилось модальное окно, параметры этого окна:

Запрещено скролить основной контент страницы - сделал.
Фон модального окна (черный-прозрачный) на всю видимую область окна браузера - сделал.
Модальное окно по центру - сделал.
Скролл модального окна, если его высота выходит за пределы окна браузера - сделал.

Вопросы:

При увеличение содержимого (или высоты) модального окна, верхняя часть модального окна оказывается за областью видимости, как быть?
Как Вы реализовали бы подобную задачу с модальным окном? Буду благодарен за любые замечания!

* { 
  box-sizing: border-box; 
} 
 
html, body { 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 100%; 
  position: fixed; 
} 
 
.modal-container { 
  position: absolute; 
  top: 0; 
  left: 0; 
  background: rgba(0, 0, 0, 0.5); 
  width: 100%; 
  height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  overflow: auto; 
} 
 
.modal { 
  position: relative; 
  background: chocolate; 
  padding: 20px; 
  flex: 0 0 50%; 
  max-width: 50%; 
  margin-top: 50px; 
  margin-bottom: 50px; 
  overflow: auto; 
  /*height: 1000px;*/ /*имитируем высоту модального окна в 1000px*/ 
} 
 
.content { 
  background: antiquewhite; 
  padding-left: 20px; 
  padding-right: 20px; 
}

<div class="modal-container"> 
  <div class="modal"> 
    Maecenas nec odio et 
    antetincidunt tempus. Donec 
    vitae sapien ut libero 
    venenatis faucibus. Nullam quis 
    ante. 
  </div> 
</div> 
 
<div class="content"> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
  <p> 
    Maecenas nec odio et ante tincidunt 
    tempus. Donec vitae sapien ut libero 
    venenatis faucibus. Nullam quis ante. 
    Etiam sit amet orci eget eros 
    faucibus tincidunt. Duis leo. Sed 
    fringilla mauris sit amet nibh. Donec 
    sodales sagittis magna. Sed 
    consequat, leo eget bibendum sodales, 
    augue velit cursus nunc, 
  </p> 
</div>

Answer 1

Ознакомьтесь: https://getbootstrap.com/docs/4.0/components/modal/

Чтобы не вылазило за область видимости нужно поставить max-height(максимальная высота) или для родительского блока height: auto