Блог

я искал во многих местах и перепробовал множество решений и обходных путей для предотвращения фоновой прокрутки тела после открытия модала.

На самом деле, для Android и рабочего стола все работает отлично.

Единственная проблема связана с iOS.

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

Итак, на данный момент единственное решение, которое я могу придумать, — это когда мобильный активирован, я показываю модальный диалог для всего размера экрана …….. я подумал… да, можно обойти, но iOS снова меня обманула

Итак, в тот момент, когда я сейчас нахожусь, я могу отключить iOS safari / Chrome только тогда, когда содержимое modal меньше высоты, я загружаю 2 фотографии, просто чтобы понять, что я имею в виду

ошибка прокрутки

нет ошибки прокрутки, когда содержимое модального больше высоты


var previousScrollY = 0;


     jQuery('#comp-modal').on('show.bs.modal', function (event) {
        previousScrollY = window.scrollY;
        var button = jQuery(event.relatedTarget);
        var pid = button.data('pid');
        var modal = jQuery(this);
        modal.find('.modal-body > .body-content').html();
        jQuery.get('/compatibility_ajax.php?p='   pid, function (data) {
            modal.find('.modal-body > .body-content').scrollTop(0);
            modal.find('.modal-body > .body-content').html(data);
        });
    });

    jQuery('#comp-modal').on('shown.bs.modal', function (event) {
        var $screensize = jQuery(window).width();
        if ($screensize < 768) {
            var modal = jQuery(this);
            modal.css('margin-top', jQuery(window).scrollTop());
            modal.css('height', window.screen.height);
            modal.find('.modal-body').css('height', 'calc(100vh - 124px)');
        }
    });

    jQuery(document).on('hidden.bs.modal', function() {
        jQuery('html').removeClass('modal-open').css({
            marginTop: 0,
            overflow: 'visible',
            left: 'auto',
            right: 'auto',
            top: 'auto',
            bottom: 'auto',
            position: 'static'
        });
        window.scrollTo(0, previousScrollY);
    });
});