Twitter Bootstrap Модальная прокрутка страницы вверх

Нажав на ссылку, которая вызывает всплывающее окно загрузки Bootstrap Modal, браузер просматривает страницу. Это поведение происходит только в Chrome.

Вот демонстрационная страница:

http://www.turizmburosu.com/test2.aspx

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

Я использую следующую функцию для запуска отображения модала:

function test(id, imp) {
    $("#modalLabel").html("Header");
    $("#modalBody").html("Body");
    $("#myModal").modal("show");
}

и ссылки имеют вид:

<a href="" onclick="test();return false;">Test Link ###</a>

Я вижу это поведение в Chrome 22.0.1229.94 м.

Любые предложения/идеи относительно того, почему это происходит и как его предотвратить?

Дополнительный пример

Это можно воссоздать на странице документации Twitter Bootstrap для плагина Modal.

Как только на странице просто переопределите существующий data-api, вместо этого используйте api-скрипт JavaScript:

$('#modals a[data-toggle="modal"]').on('click',
  function(e) {
    $('#myModal').modal('toggle');
    return false
  });

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

Опять же, это использование Chrome.

Ответ 1

Исправлено (10/29/2012)

Эта проблема исправлена с момента загрузки Bootstrap v2.2.0. Подробнее см. commit e24b46....

(оригинальный ответ)

Это связано с ошибкой в реализации Twitter Bootstrap Modal (с 2.1.1). Корень проблемы заключается в том, что фокус устанавливается на модальный до его завершения. Это произойдет только при условии, что

браузер поддерживает переходы CSS (и вы используете bootstrap-transition.js);
модальный имеет класс fade; и
Когда фокус установлен на элемент за пределами текущего представления, браузер будет прокручивать его, чтобы переместить его в режим просмотра (например, Chrome, Safari).

Следует отметить, что это влияет как на API данных (на основе разметки), так и на API-интерфейс Programmatic (JS-based). Тем не менее, причина, по которой это более заметно при использовании программного подхода, заключается в том, что, в отличие от API данных, он автоматически не восстанавливает фокус на элемент запуска и, следовательно, не прокручивает вид назад, когда модаль скрыт.

Дополнительная информация доступна в Twitter Bootstrap repo под Проблема № 5336: Модальные прокрутки Фоновый контент.

Исправление было объединено с веткой 2.1.2-wip, которая должна быть выпущена для любого день.

Вот демонстрационная версия с использованием патча bootstrap-modal.js:

JSFiddle

Ответ 2

Такая же проблема. Это вызвано "#", и анкер выполняет прокрутку. Я исправил это, удалив привязную метку и поместив ее:

<span onclick="$('#umisteni_modal').modal('show');" style="cursor:pointer;">Změnit místo dodání</span>

Ответ 3

У меня была аналогичная проблема на моем сайте, которая была вызвана другим плагином jquery (sidr). Когда боковая панель присутствовала, и я открыл модальное окно, я был бы отправлен назад.

В jquery.sidr.js я изменил строку 102-106 на:

// Prepare page if container is body
if($body.is('body')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}

To:

// Prepare page if container is body
if($body.is('body') && !$('#modal').hasClass('in')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}

Если вы используете этот плагин вместе с модулем twitter bootstrap, возможно, это может вам помочь.

Ответ 4

У меня была такая же проблема из-за этих строк CSS, которые, как полагали, постоянно отображали полосы прокрутки в браузере. Удаление двух линий решило проблему:

html,
body {
    min-height: 100%;
    height: 101%;
}

Ответ 5

чтобы вернуть фокус на закрытии

var triggerOffset=0;
$('.modal').on('show.bs.modal', function() {
    triggerOffset=$(window).scrollTop();
});
$('.modal').on('hidden.bs.modal', function() {
     var animationTime=1;
    $('html, body').animate({
        scrollTop: (triggerOffset)
    }, animationTime);
});

Ответ 6

У меня была эта проблема так долго, но моим решением было удалить href из тега привязки

то есть.

<a onclick="test();return false;">Test Link ###</a>

Теперь я не прыгаю

Надеюсь, что это поможет кому-то в будущем