Подтвердить что ты не робот

Twitter bootstrap 3 модальный по мобильным проблемам прокрутки

В настоящее время я использую twitter bootstrap 3 modal на мобильном устройстве. Он отлично работает на рабочем столе, однако на мобильном телефоне всякий раз, когда я прокручиваю его, также прокручивается окно за модальным. Как предотвратить это?

4b9b3361

ОТВЕТЫ

Ответ 1

ДЛЯ BOOTSTRAP 3

Я нашел исправление для этой проблемы, которое кажется достаточно хорошим для моего сайта.

CSS

body.modal-open > .wrap {
  overflow: hidden;
  height: 100%;
}

.modal-content, 
.modal-dialog, 
.modal-body { 
  height: inherit; 
  min-height: 100%; 
}

.modal { 
  min-height: 100%; 
}

HTML:

<body>
  <div class="wrap">All non-modal content</div>
  <div class="modal"></div>
</body>

Таким образом, в случае открытия модальности все немодальное содержимое ограничено высотой области просмотра, а переполнение скрыто, что предотвращает прокрутку основного сайта, в то время как модальная модель все еще может быть прокручена.

EDIT. У этого исправления есть некоторые проблемы в Firefox.

Исправление для моего сайта было (FF only media query):

@-moz-document url-prefix() {
  .modal-body { height: auto; min-height: 100%; }
  .modal { height: auto; min-height: 100%; }
  .modal-dialog {
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
  }

  .modal-content {
    height: auto;
    min-height: 100%;
    border-radius: 0;
    border: 0px solid #000;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
  }

}

Ответ 2

Да, это было очень неприятно, когда я столкнулся с этой проблемой на моем iphone 6 сегодня.

Это все еще кажется проблемой, даже с последней загрузкой ( 3.3.6 в данный момент).

CSS Quickfix Решение:

body.modal-open { position: fixed; }

"Обратите внимание, что это имеет побочный эффект" прокрутки "до верхней части страницы, пока модальная функция открыта".

Подробнее об этом решении здесь

Javascript/jQuery Решение:

Лучшим решением было бы использовать загрузочные модальные события. Это решение объединяет метод quickfix, но устраняет проблему "сверху страницы". Затем вы можете изменить css по мере необходимости в зависимости от события.

В моем коде ниже я устанавливаю текущую позицию окна в событии show.bs.modal (это значение используется для исправления проблемы "быстрого исправления" ).

Затем я применяю быстрое исправление css в событии shown.bs.modal. Другими словами, после того, как модальные всплывают.

Наконец, когда модаль закрыт, я переключаю положение тела на относительное (может быть, как я полагаю, также статичным) и прокручиваю окно обратно в исходное положение.

// set current position
var cPosition = false;

$('.modal').on('show.bs.modal', function(){

    cPosition = $(window).scrollTop();
})
.on('shown.bs.modal', function(){

    $('body').css({
        position:'fixed'
    });

})
.on('hide.bs.modal', function(){

    $('body').css({
        position:'relative'
    });

    window.scrollTo(0, cPosition);

});

Должно быть относительно просто настроить для любого, у кого есть опыт работы с javascript.

Надеюсь, они решают эту проблему в бутстрапе 4, но до тех пор надеются, что этот ответ поможет другим людям с подобными проблемами.

Ответ 3

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

Похоже, эффект состоит в том, чтобы прокручивать модальную до степени модальности, затем автоматически прокручивать фоновый рисунок, даже если модальная форма еще открыта.

Ответ 4

Интересно, что они обращаются к этому в документах, не предлагая много способов решения:

"Поддержка переполнения: скрытая в элементе <body> довольно ограничена в iOS и Android. С этой целью, когда вы просматриваете верхнюю или нижнюю часть модального файла в любом из этих браузеров, <body> содержимое начнет прокручиваться".

http://getbootstrap.com/getting-started/#overflow-and-scrolling

Ответ 5

Эй, ребята, поэтому я думаю, что нашел исправление для Bootstrap 3. Это работает на меня на iphone и Android в настоящий момент. Его разброс часов в часы поиска, чтения и тестирования. Так что, если вы видите части своего кода, здесь вы получаете кредит lol.

@media only screen and (max-device-width:768px){

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 {  
overflow-x: hidden;
overflow-y: scroll !important;
}

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

Ответ 6

Для Bootstrap 3

Я нашел решение для мобильных устройств (сенсорный экран) с iscroll.js

в содержании модального add:

 <div id="smartScroll"> Content of the modal </div>

Для инициализации на .js

var myScroll = new IScroll('#smartScroll', {
   mouseWheel: true,
   scrollbars: true,
   click: true
});

Ответ 7

 .modal-open .modal .modal-dialog {
   max-height: 100%;
  }

Это работает для меня!