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

Question

[Юрий Гец]

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. попап это зелёные кнопки в прайсе.

Comments

[tyzberd]

сделайте модальные окна с использованием dimsemenov.com/plugins/magnific-popup
там все это есть. И не будет такого дублирования js для каждого окна

Answer 1

[IIIu6ko]

Чтобы фон не прокручивался под попапом нужно для body задать overflow: hidden

Сделай класс отдельный для этого и присваивай его к body при открытии попапа.

Comments

[Юрий Гец]

как это выглядит? поковырял, не получилось

[IIIu6ko]

Добавление класса, Удаление класса, Варьирование наличия класса

Вот так:

.scroll-hidden {
    overflow: hidden;
}

$("body").addClass("scroll-hidden"); // Добавление класса
$("body").removeClass("scroll-hidden"); // Удаление класса
$("body").toggleClass("scroll-hidden"); // Удаление либо добавление класса в зависимости от его наличия

То есть, при открытии popup'а мы добавляем класс, при закрытии удаляем класс.

[Юрий Гец]

IIIu6ko, совсем туплю и не пойму что делаю не так.
Скрипт и класс создал и присвоил попапу, но не работает. Что то не так.

Вот код. Используйте Ctrl+F и просмотрите «scroll-hidden».

[IIIu6ko]

Юрий Гец, Кусок кода на jquery я привел для примера.

Смотрите, у Вас есть функции отображения и скрытия попапа

//Функция отображения PopUp
    function PopUpShow(){
        $("#popup1").show();
    }
    //Функция скрытия PopUp
    function PopUpHide(){
        $("#popup1").hide();
    }

Я так понимаю для каждой кнопки отдельная функция, это конечно странно, но ладно, не суть.

В каждую функция в зависимости от того что она делает прописываем
либо $("body").addClass("scroll-hidden");
либо $("body").removeClass("scroll-hidden");

Если это функция отображения, то addClass

//Функция отображения PopUp
    function PopUpShow(){
        $("#popup1").show();
        $("body").addClass("scroll-hidden");
    }

Если скрытия, то removeClass

//Функция скрытия PopUp
    function PopUpHide(){
        $("#popup1").hide();
        $("body").removeClass("scroll-hidden");
    }

Если помог, то отметьте ответ решением.

[Юрий Гец]

IIIu6ko, Супер, помогли!)) Спасибо огромное. Правда на iOS это не работает.

Готов поставить поставить правильным ответом, только у темы 2 вопроса((((

Если и тут поможете – буду безгранично благодарен и поставлю правильным ответом ;-)

[IIIu6ko]

Юрий Гец, Понятно. Зря время значит тратил)

[Юрий Гец]

Не зря тратил, просто не все вопросы закрывает.
Я отметил правильным решением, в знак благодарности.

[IIIu6ko]

Юрий Гец, Во все 9 штук ещё добавьте $("body").removeClass("scroll-hidden");

<!-- НИЖЕ СКРЫТИЕ ПОПАПА КЛИКОМ ПО НЕАКТИВНОЙ=ФОНОВОЙ ОБЛАСТИ -->
  <script>
    $(document).mouseup(function (e) {
            var container = $("#popup1");
            if (container.has(e.target).length === 0){
                container.hide();
                $("body").removeClass("scroll-hidden"); 
            }
    });
  </script>

[Юрий Гец]

IIIu6ko, спасибо так и сделал пока вы отвечали))
не ясно почему на iOS не работает блокировка фона
да и вопрос с шириной сайта остаётся((

[IIIu6ko]

Юрий Гец, попробуйте в класс добавить height, width, и position: fixed

.scroll-hidden {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

[Юрий Гец]

IIIu6ko, Помогло. Теперь фон и на iOS фиксируется.
Правда теперь при открытии Popup – почему-то перекидывает вверх сайта (это можно увидеть закрыв попап).

[IIIu6ko]

Юрий Гец, Это видимо минус этого способа.
Гуглите overflow hidden ios или что-то подобное.

Answer 2

[Юрий Гец]

Второй вопрос решён!

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

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

Стало:

<meta name="viewport" content="width=device-width">

Answer 3

[Mickey_Zzz]

Так же при использовании такого метода бывает, что дергается экран. Для удаления эффекта необходимо привести все страницы к одной ширине, для этого в файле CSS прописываем свойство, которое добавит полосу прокрутки на всех страницах ресурса (даже для которых она не требуется).
html {
overflow-y: scroll;
}