Я использую 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%;
}
Этот поток: Модальный плагин Bootstrap 2 не отображается центром имеет правильный ответ, также размещенный здесь:
$('#YourModal').modal().css(
{
'margin-top': function () {
return window.pageYOffset-($(this).height() / 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);
});
Теперь, когда модалы уволены, они появляются в верхней части страницы, окно браузера прокручивается вверх, чтобы выставить их, но пользователь все еще может прокручивать вниз, если их экран слишком мал, чтобы отобразить всю длину модального файла.
Используйте положение "fixed" not "absolute".
Подробнее здесь http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Немного поздно в игре, но это исправление, которое я сейчас использую и работаю над 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%' });
});
Пришлось перейти на абсолютное позиционирование, чтобы он прокручивал мобильные телефоны.
Это сработало и для меня (решение от 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);
});
Проблема - CSS - теги "body" и "HTML" установлены на "height: 100%"