@losso_lapolososso

Не работает скролл модального окна?

Здравствуйте, у модального окна появляется полоска скролла, но самого скролла нету.
5ef281098c0f5125168219.png
Справа скролл самого сайта.
Вот html:
<div id="my_modal" class="modal">
		<div class="modal_content">
			<span class="close_modal_window">×</span>
			<p>Нарезное пирожное «Сникерс»</p>
			<div class="modalImg d-flex justify-content-between">
				<div class="imgwrip">
					<img src="img/i1.jpg" alt="">
				</div>
				<div class="descript">
					<div class="p">
						<p>«Сникерс» - бисквит шоколадный, креме шоколадное, мусс на основе нуги с арахисом, мягкая Карамель без желатина, жареный арахис, глазурь. </p>
					</div>
					<div class="butBuy d-xl-flex d-lg-flex d-md-block d-sm-block d-block justify-content-around">
						<div class="one">
							<p>Видеоурок + технологическая карта</p>
							<h3>2 500 руб.</h3>
							<a id="nu">Начать изучение</a>
						</div>
						<div class="two">
							<p>Технологическая карта</p>
							<h3>1 500 руб.</h3>
							<a id="nuni">Начать изучение</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000; }

.modal .modal_content {
  background-color: #fefefe;
  margin: 1rem auto;
  padding: 20px;
  border: 1px solid #888;
  width: 99%;
  z-index: 99999;
  overflow-y: scroll;
  height: 1000px; }
  .modal .modal_content .modalImg {
    margin-top: 30px; }
    .modal .modal_content .modalImg .descript .p p {
      font-size: 18px;
      font-weight: 600; }
  .modal .modal_content img {
    width: 300px;
    margin-right: 50px; }
  .modal .modal_content .butBuy {
    margin-top: 50px; }
    .modal .modal_content .butBuy .one {
      text-align: center; }
      .modal .modal_content .butBuy .one p {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 20px !important; }
      .modal .modal_content .butBuy .one h3 {
        margin-bottom: 30px; }
      .modal .modal_content .butBuy .one a {
        background: #FE4646;
        padding: 10px 30px;
        border-radius: 10px;
        color: white;
        font-size: 18px;
        font-weight: 700;
        text-decoration: none; }
        .modal .modal_content .butBuy .one a:hover {
          -webkit-transition: all ease 0.2s;
          -o-transition: all ease 0.2s;
          transition: all ease 0.2s;
          border: 2px solid #FE4646;
          background: none;
          text-decoration: none;
          color: #FE4646; }
        .modal .modal_content .butBuy .one a:not(:hover) {
          -webkit-transition: all ease 0.2s;
          -o-transition: all ease 0.2s;
          transition: all ease 0.2s;
          border: none;
          background: #FE4646;
          text-decoration: none;
          color: white; }
    .modal .modal_content .butBuy .two {
      text-align: center; }
      .modal .modal_content .butBuy .two p {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 20px !important; }
      .modal .modal_content .butBuy .two h3 {
        margin-bottom: 30px; }
      .modal .modal_content .butBuy .two a {
        background: #FE4646;
        padding: 10px 30px;
        border-radius: 10px;
        color: white;
        font-size: 18px;
        font-weight: 700;
        text-decoration: none; }
        .modal .modal_content .butBuy .two a:hover {
          -webkit-transition: all ease 0.2s;
          -o-transition: all ease 0.2s;
          transition: all ease 0.2s;
          border: 2px solid #FE4646;
          background: none;
          text-decoration: none;
          color: #FE4646; }
        .modal .modal_content .butBuy .two a:not(:hover) {
          -webkit-transition: all ease 0.2s;
          -o-transition: all ease 0.2s;
          transition: all ease 0.2s;
          border: none;
          background: #FE4646;
          text-decoration: none;
          color: white; }

.modal .modal_content .close_modal_window {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer; }

Если, что сайт на bootstrap 4, но использовать бутстраповские модальные окна не хочу.
  • Вопрос задан
  • 82 просмотра
Пригласить эксперта
Ответы на вопрос 2
HistoryART
@HistoryART
Надзиратель
Дайте человеку мозг) Смотрите. Если у вас контент не выходит за рамки блока - будет пустой скроллбар, без поинтера. Когда контент будет больше - появится сам поинтер и можно будет крутить.
Ответ написан
@Zlobarchic
в .modal .modal_content замените "overflow-y: scroll;" на "overflow-y: auto;"
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы