Как предотвратить фоновую прокрутку при открытии нескольких всплывающих окон

Question

У меня есть всплывающее окно с именем Products, и когда пользователь нажимает на любой продукт, открывается новое всплывающее окно, которое содержит product information. Я предотвращаю прокрутку фона при открытии всплывающего окна с помощью этого CSS:

body.modal-open {
  position: fixed;
}

Я удаляю это свойство position, когда пользователь закрывает всплывающее окно, чтобы фон снова начал прокручиваться.

Проблема в том, что при открытии всплывающего окна products фон перестает прокручиваться (что нормально), а после этого при открытии всплывающего окна product information фон все равно останавливается (что тоже хорошо), но когда пользователь закрывается product information прокрутка начинается снова.

Я хочу иметь его, чтобы окно начинало прокручиваться только тогда, когда закрыты оба всплывающих окна. Как я могу этого достичь?

Answer 1

атрибут стиля CSS overflow-y: скрыто; предотвращает фоновую прокрутку, если применяется к элементу HTML, из которого вы хотите удалить прокрутку. Попробуйте ниже в браузере: а) Откройте страницу с всплывающим на ней. б) применить стиль переполнения-у: ​​скрытый; на элемент, из которого вы хотите удалить прокрутки. Свиток должен исчезнуть. c) Для достижения этой цели вы должны написать js-код для добавления вышеуказанного стиля к желаемому элементу по нажатию всплывающего элемента триггера. Только CSS не сможет удовлетворить ваши требования, поскольку вам нужно сделать это динамически.