yora_gets
@yora_gets
Копирайтер

Как решить две проблемы: (1) прокрутка фона Popup и (2) выползание сайта за экран?

1) Когда открываю на мобильнике (вертикально или горизонтально) – Popup на своём сайте, то фон под ним (то есть сам сайт = body = #Block) прокручивается вместе с модальным окном (попапом).

Нужно зафиксировать фон во время открытого модального окна.

Подсказали это решение (скорее всего верное), но не пойму как его применить.

2) Вторая ситуация тоже с мобильника, но в вертикальном режиме страница уходит чутка вправо, за экран. Нужно чтобы не выходило за край))

Вот код Popup:
.b-popup {
    width: 100%;
    min-height: 100%;
    background-color: rgba(0,0,0,0.5);
    overflow: hidden;
    position: fixed;
    top: 0px;
    left: 0px;
}
  
.b-popup .b-popup-content {
    margin: 3%;
    width: 80%;
    height: auto;    
    padding: 35px 42px 33px 45px;
    text-align: left;
    background-color: #eeeeee;
    box-shadow: 10px 10px 70px 10px #4b4b4b;
    position: relative;
    overflow: auto;
}

Код сайта – длинный, поэтому сюда копировать не буду.
Вот ссылка на исходник:
view-source:https://yurii-hets.blogspot.com/

p.s. дело имеем с iOS.
p.p.s. попап это зелёные кнопки в прайсе.
  • Вопрос задан
  • 3239 просмотров
Решения вопроса 1
IIIu6ko
@IIIu6ko
Чтобы фон не прокручивался под попапом нужно для body задать overflow: hidden

Сделай класс отдельный для этого и присваивай его к body при открытии попапа.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
yora_gets
@yora_gets Автор вопроса
Копирайтер
Второй вопрос решён!

Всё дело было в – meta viewport.
Нужно было вообще убрать «initial-scale»:

Было:
<meta name="viewport" content="width=device-width", initial-scale="1">

Стало:
<meta name="viewport" content="width=device-width">
Ответ написан
Комментировать
Micky__Zzzz
@Micky__Zzzz
простой мужик
Так же при использовании такого метода бывает, что дергается экран. Для удаления эффекта необходимо привести все страницы к одной ширине, для этого в файле CSS прописываем свойство, которое добавит полосу прокрутки на всех страницах ресурса (даже для которых она не требуется).
html {
overflow-y: scroll;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
SummerWeb Ярославль
от 120 000 до 180 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
19 июн. 2024, в 09:56
1000 руб./за проект
19 июн. 2024, в 09:04
5000 руб./за проект