Опишу мой случай:
Скопировал рабочий сайт на другой хостинг (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);
}
Простой
Простой