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

нажатие на ссылку, которая запускает модальную загрузку Twitter, вызывает прокрутку страницы браузером. Такое поведение наблюдается только в 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 m.

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

дополнительные Пример

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

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

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

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

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

11
css html javascript scroll twitter-bootstrap-2

6 ответов

исправлено (29.10.2012)

эта проблема была исправлена с Bootstrap v2.2.0. См.совершить e24b46... для сведения.

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

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

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

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

дополнительная информация доступна на Twitter Bootstrap РЕПО под Выпуск #5336: Модальные Прокрутки Фонового Контента.

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

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

JSFiddle

18

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

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

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

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

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

в:

// 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, возможно, это может вам помочь.

1

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

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

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

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);
});
0

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

то есть 

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

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

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

0