Как отключить скролл при открытой модалке?

Всем привет. Использую на сайте magnific popup.
На айфоне в сафаре при открытии модалки, скроллится весь сайт. Как отключить этот скролл, чтобы работало overflow:hidden на body?

Уже наверно все способы протестил. Нифига. Какой использовали вы и вам точно помогло? Именно с данным плагином

Заранее спасибо!
  • Вопрос задан
  • 872 просмотра
Пригласить эксперта
Ответы на вопрос 3
@studenovroma
Если зайдешь на сам сайт apple.com, то ты увидишь как они это делают. Просто при открытии модального окна ты делаешь размер html под высоту размера экрана, т.е. 100%.
Ответ написан
Комментировать
@bpGusar
*spoiler*
я боролся с подобной проблемой однажды несколько дней, перепробовал всё что можно наверное, причем все эти финты ушами с фиксированным позиционированием и высотой в ширину экрана не спасали ибо эта ширина не учитывала сжимающуюся адресную строку, но спас один скрипт https://github.com/willmcpo/body-scroll-lock
Ответ написан
Комментировать
Fortoo
@Fortoo
Top-Web OpenCart
Опишу мой случай:
Скопировал рабочий сайт на другой хостинг (masterhost) и модалка (magnific popup) начала прокручиваться вместе со всей страницей на любых мобильных устройствах.
Целый день Поиска такого поведения не дал результата, хоть я и перешерстил все события и всевозможные сценарии.
Наверное какие-то глюки хостинга- ибо нет другого объяснения, чтобы перестала адекватно работать библиотека(magnific popup).
Я неоднократно замечал, как из-за хостинга (eternalhost) переставал работал ajax и т.п.(хотя такое редко случается). И только долгие переписки с поддержкой, помогали решить проблему.
Конечно можно было-бы продолжать поиски, т.к. в библиотеке есть Ветвления с определением устройства.....

Но решил сделать костыль:
учитывая что при открытии модалки, некоторым тегам должны добавляться стили
<html style="margin-right: 17px; overflow: hidden;">

<div class="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ready" tabindex="-1" style="overflow: hidden auto;">

но overflow: hidden; не добавлялся

пример из OpenCart (быстрая корзина)
function fastorder_open_cart() { 
  $.magnificPopup.open({
	tLoading: '<span><i style="font-size:50px;" class="fa fa-spinner fa-pulse"></i></span>',
	items: {
	  src: '#popup-quickorder',
	  type: 'inline',
	  modal: true
	}			
  });
  $( "#quick_checkout_cart" ).load( 'index.php?route=checkout/quick_checkout_cart');
  //SV исправление бага скрола вместе с попапом
    setTimeout(function(){
      $('html').css('overflow', 'hidden');
      $('.mfp-wrap').css('overflow', 'hidden auto');
    }, 100);
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
25 нояб. 2024, в 21:54
20000 руб./за проект
25 нояб. 2024, в 21:39
3000 руб./за проект
25 нояб. 2024, в 21:34
7000 руб./за проект