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

Нажатие на ссылку, которая вызывает всплывающее окно Twitter 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>

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

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

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

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

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

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

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

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

 Lexicon15 окт. 2012 г., 17:31
Я использую версию 22.0.1229.94 м и когда модал всплывает, тело прокручивается вверх. Weird. Также на двух других моих компьютерах (той же версии) происходит то же самое.
 merv15 окт. 2012 г., 18:31
Я вижу это. Он прокручивается примерно на 50 строк каждый раз, когда я нажимаю на ссылку.
 EricG15 окт. 2012 г., 16:05
Кажется, у меня нормально работает ..? [Версия 22.0.1229.94 m] Если так, опубликуйте собственное решение ..?
 Cristiano Fontes15 окт. 2012 г., 13:25
Можете ли вы опубликовать пример? код? изображение? ссылка на сайт?
 mas-designs15 окт. 2012 г., 17:07
работает нормально, попробуйте удалить кеш и снова открыть свою веб-страницу

Ответы на вопрос(6)

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

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

которая была вызвана другим плагином 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);
}

Для того, чтобы:

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

Если вы используете этот плагин вместе с модальной загрузкой Twitter, возможно, это может вам помочь.

Решение Вопроса
Исправлено (29.10.2012)Эта проблема была исправлена начиная с Bootstrap v2.2.0. Видетьсовершить e24b46 ... для деталей.

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

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

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

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

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

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

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

JSFiddle
 MandM04 сент. 2014 г., 20:40
Не исправлено здесь - я испытываю это с Bootstrap v3.2.0.
 Lexicon10 нояб. 2012 г., 02:37
Большое спасибо, Мерв.
 merv16 нояб. 2013 г., 20:52
@kritzikratzi Пожалуйста, предоставьте jsfiddle (или подобное), демонстрирующее проблему, а также информацию о браузере. Если это допустимая ошибка, вы должны опубликовать на github (Выпуск № 5336), но проблема в том, что ошибка будет присутствовать в последней версии (v3.0.2), чего, на мой взгляд, нет.
 kritzikratzi16 нояб. 2013 г., 19:31
не исправлено, только что протестировано в 2.3.2
 Dan09 нояб. 2012 г., 15:35
Спасибо, после долгого поиска это очень помогло.

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

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

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

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

но я решил удалить href из тега привязки

то есть

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

Я не прыгаю сейчас

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

Ваш ответ на вопрос