размер класса шаблона

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

Заметки Виктора добавили, что position:fixed работает.

body.modal-open {
    overflow: hidden;
    position: fixed;
}

И это действительно так. Тем не менее, он также имеет небольшое побочное воздействие, существенно прокручивающееся вверх. position:absolute разрешает это, но повторно вводит возможность прокрутки на мобильном устройстве.

Если вы знаете свой видовой экран ( мой плагин для добавления видового экрана в ), вы можете просто добавьте css toggle для position.

body.modal-open {
    // block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens
    overflow: hidden;
    position: fixed;
}
body.viewport-lg {
    // block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile
    position: absolute; 
}

Я также добавлю это, чтобы не допустить, чтобы базовая страница прыгала влево / вправо при показе / скрытии модалов.

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

13
задан fogbit 7 November 2013 в 08:44
поделиться