Задать вопрос
kvestor
@kvestor
javascript

Почему после закрытия модального окна оно не прокручивается?

Здравствуйте.
В общем такая проблема, есть кнопка которая открывает модалку (1), в которой тоже есть кнопка, которая открывает ещё одну модалку (2). При закрытии модалки (2) контент модалки (1) не прокручивается, а прокручивается контент основной страницы. В таком случае при условии что в модалке много текста/контента докрутить содержимое до кнопки "Закрыть" невмозожно. Как это исправить?

bootstrap.gif

Пробовал вызывать методы show, handleUpdate, но это не помогло.

На CodePen и JSFiddle не работает открытие модалок, поэтому страницу с примером сделал.

Исходный код

<!DOCTYPE html>
<html lang="ru">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />

    <title>Пример проблемы с модалкой</title>
  </head>
  <body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#firstModal">
      Открыть модалку (1)
    </button>

    <!-- Modal -->
    <div class="modal fade" id="firstModal" tabindex="-1" aria-labelledby="firstModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#secondModal">
              Открыть модалку (2)
            </button>
            lorem512
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">
              Закрыть
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="secondModal" tabindex="-1" aria-labelledby="secondModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">Lorem ipsum</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">
              Закрыть
            </button>
          </div>
        </div>
      </div>
    </div>
    lorem2048
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>



UPD: Теперь не работает отлов события hide.bs.modal или hidden.bs.modal и даже hidePrevented.bs.modal. Думал добавить на это событие добавление класса, а оно не работает.
  • Вопрос задан
  • 628 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 2
@leshiple
После открытия модального окна элементу body добавляется класс modal-open, который делает overflow:hidden и контент страницы страницы не прокручивается. После закрытия второго модального окна класс modal-open удаляется и страница вновь прокручивается.
Ответ написан
1 комментарий
1 комментарий
DanArst
@DanArst Куратор тега CSS
Гриффиндор в моде при любой погоде!
Надо просто добавить body класс modal-open после закрытия второго модального окна

На CodePen и JSFiddle не работает открытие модалок

и все прекрасно работает
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
yurikfirst777
@yurikfirst777
Немногоословен
Тут дело в overflow: hidden; в body
Модалка скрывает ползунок прокрутки, вот и не двигается ничего, а так контент можно выделить, копировать нажимать.. только счас об этом догадался))
И как у body его снять, уже скриптовым решением видимо
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Проектирование WEB ПО и составление ТЗ
21 нояб. 2024, в 17:47
7000 руб./за проект
Разработчика на opencart
21 нояб. 2024, в 17:30
1500 руб./за проект
Бот парсер
21 нояб. 2024, в 17:22
7000 руб./за проект
Ещё заказы