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

Question

[barabash2090]

1. При открытии корзины товаров заблокировать нажатия мышкой на все элементы страницы кроме непосредственно данного модального окна.
2. Также при работе модального окна, заблокировать возможность крутить колесиком мышки вниз ниже модального окна с корзиной.
Все это нужно сделать на чистом js es6, как и модальное окно с функционалом которое я уже сделал.

Answer 1

[Анатолий Куликов]

1. Сделать wrapper для модалки во всю ширину и высоту, fixed, с самым большим z-index'ом;

2. Для body сделать специальный стиль, например, fixed-body с такими стилями:

width: 100vw;
height: 100vh;
overflow: hidden;

И при открытии корзины вешать на body этот стиль.

Comments

[barabash2090]

Во wrapper завернуть модалку, или внутри модалки wrapper?

[Анатолий Куликов]

barabash2090, во wrapper

[barabash2090]

Спасибо!

Answer 2

[strelok011]

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

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