@Skilful221

Как сделать скролл не страницы, а модального окна?

Заказчик жалуется что у него модальное окно выглядит вот так5dfe08abdb905352191731.jpeg
делаю окно модалки вот для этого сайта
есть почти такой же сайт в нем заказчик говорит что у него мдальное окно выглядит нормально
в общем я решил переделать скролл(как сделано в сайте№2) чтобы при открывании модалки у body появлялось overflow-y: hidden -отключался скролл
а у модального окна он появлялся свой скролл overflow-y: auto, как сделано в сайте №2.
но не работает почему-то
$(function(){
	function showModal(id){
		$(document.body).addClass('modal_hidden');
		$(id).addClass('modal_active');
		console.log(id);
	}
	function hideModals(){
		$(document.body).removeClass('modal_hidden');
		$('.modal').removeClass('modal_active');
	}

	$(".button_modal").on('click', function(e){
		console.log(e);
		showModal('#modal');
 });
	
	$(document).on('click', function(e){
		if (!(
		($(e.target).parents('.modal-block').length)
		||	($(e.target).hasClass('modal-block'))
		||	($(e.target).hasClass('button_modal')))
		) {
			hideModals();
		}
	});
	
});

мне кажется проблема связана с тем что modal_active-hidden всегда находится на body, хотя должен появляться только при нажатии на модальное окно
.modal
  position: fixed
  display: none
  left: 0
  top: 0
  width: 100%
  height: 100%
  background-color: rgba(#000, 0.7)
  +reg
  z-index: 2
  overflow-x: hidden
  overflow-y: auto
  &_active
    display: flex
    flex-direction: column
    &-hidden
      overflow-y: hidden
  • Вопрос задан
  • 150 просмотров
Решения вопроса 1
вам на body нужно вешать класс, который будет скрывать основной скрол, когда модалка открыта
spoiler

.modal-open {
overflow: hidden;
}

у меня скрол в модальном окне работает
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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