@barabash2090

Как оптимизировать страницу с корзиной товаров?

5e5e985d8ffe7458831259.png
1. При открытии корзины товаров заблокировать нажатия мышкой на все элементы страницы кроме непосредственно данного модального окна.
2. Также при работе модального окна, заблокировать возможность крутить колесиком мышки вниз ниже модального окна с корзиной.
Все это нужно сделать на чистом js es6, как и модальное окно с функционалом которое я уже сделал.
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
anatoly_kulikov
@anatoly_kulikov
Помог ответ? Отметь решением!
1. Сделать wrapper для модалки во всю ширину и высоту, fixed, с самым большим z-index'ом;

2. Для body сделать специальный стиль, например, fixed-body с такими стилями:
width: 100vw;
height: 100vh;
overflow: hidden;

И при открытии корзины вешать на body этот стиль.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@strelok011
Добавляете перед модалкой div.overlay с прозрачностью, 100% на 100% размеры, fixed.
Модалка так же fixed.
На боди, как рекомендовали выше, оверфлоу хидден - отключит скролл. Не забудьте добавить скролл внутри модалки. Иначе на мелких экранах контент с кнопками уедет за край.
Модалке прописать поведение в стилях, как она должна размещаться на разных разрешениях (отступы, проценты занимаемой площади, поведение на мобилах, переполнение содержимым и прочие скучные штуки)
Еще вздорный заказчик может попросить при блокировании скролла страницы чтоб она не уезжала вверх - придется на js считать на сколько при вызове модалки была прокручена страница с тем, чтобы потом восстанавливать смещение.
Работы много.
p.s. блок с модалкой и оверлеем - в самый конец документа. Тогда вы гарантировано сможете поднять z-index. И ни в коем случае не вкладывать в контейнеры с контентом. Они могут всё испортить своими атрибутами relative к примеру, или заблокировать по z-index.

Возможно, было бы проще поискать готовый плагин. В котором всё учтено.
Ответ написан
Ваш ответ на вопрос

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

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