Установите модальный слой в центр для просматриваемого экрана.

Я использую Twitter Bootstrap modal, но мне пришлось изменить свое положение на абсолютное, потому что мне нужно, чтобы они могли прокручивать причиной небольших экранов. К сожалению, при этом модальные формы открываются в фиксированное положение сайта, а не в просматриваемой области. Есть ли способ открыть их (и иметь возможность прокручиваться) на экране, что я сейчас просматриваю?

CSS

.modal {
    width: 845px;
    margin: -250px 0 0 -430px;
    background-color: #f6f5ed;
    position: absolute;
    border: 1px solid #cdc4b2;
    top: 50%;
    left: 50%;
}

Ответ 1

Этот поток: Модальный плагин Bootstrap 2 не отображается центром имеет правильный ответ, также размещенный здесь:

   $('#YourModal').modal().css(
            {
                'margin-top': function () {
                    return window.pageYOffset-($(this).height() / 2 );
                }
            });

Ответ 2

Решение от @steve не работает для меня, несмотря на то, что моя проблема идентична @Stephanie.

Повторяя проблему, которую мы разделяем Стефани:

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

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

Итак, чтобы исправить их оба:

CSS

// allows the modal to be scrolled
.modal {position: absolute;}

JavaScript/JQuery:

// jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
  $('body').scrollTop(0);
});

Но оказывается, что Firefox не любит "body" как селектор для scrollTop, но ему нравится "html". Webkit работает наоборот. Используя комментарий отсюда: Анимать scrollTop не работает в firefox

Поскольку я использую jQuery < 1.9 Я могу сделать снимок браузера, чтобы решить эту проблему:

// jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
  // Firefox wants 'html', others want 'body'
  $(jQuery.browser.mozilla ? "html" : "body").scrollTop(0);
});

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

Ответ 3

Используйте положение "fixed" not "absolute".

Подробнее здесь http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Ответ 4

Немного поздно в игре, но это исправление, которое я сейчас использую и работаю над Firefox, Chrome и IE.

$('body').on('show', '.modal', function () {
$(this).css({ 'margin-top': window.pageYOffset - $(this).height() / 2, 'top': '50%' });
$(this).css({ 'margin-left': window.pageXOffset - $(this).width() / 2, 'left': '50%' });
});

Ответ 5

Пришлось перейти на абсолютное позиционирование, чтобы он прокручивал мобильные телефоны.

Это сработало и для меня (решение от AllInOne):

// jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
  // Firefox wants 'html', others want 'body'
  $(jQuery.browser.mozilla ? "html" : "body").scrollTop(0);
});

Ответ 6

Проблема - CSS - теги "body" и "HTML" установлены на "height: 100%"