У меня проблема, с модальным окном. У меня есть кнопка на странице, которая переключает модальное окно. Когда появляется модальное окно, страница переходит наверх.
Я сделал все, что мог, чтобы найти решение и т. Д., Но я действительно потерялся.
РЕДАКТИРОВАТЬ:
Я также пробовал с: $('#myModal').modal('show');
но имеет тот же эффект.
window
, модальное окно срабатывает. Это кажется странным неожиданным. Я удалилbutton
via devtools, и щелчок в любом месте страницы по-прежнему открывал модальное окно. Было ли это желаемое поведение? Интересно, нет ли у вас подходящего селектора для модального события щелчка.Ответы:
Когда модальное окно открывается,
modal-open
в<body>
тег устанавливается класс . Этот класс устанавливаетсяoverflow: hidden;
в тело. Добавьте это правило в свою таблицу стилей, чтобы переопределить стиль bootstrap.css:Теперь свиток должен оставаться на месте.
источник
.modal('show')
но оно все еще прокручивается до верхней части страницы. Bootstrap v3.2.0position: inherit
в этот класс, но после этого работал как шарм.Если вы вызываете модальное окно с тегом. Попробуйте удалить '#' из атрибута href и вызвать модальное окно с атрибутами данных.
источник
если вы используете тег привязки как
<a href"#" ..> ... </a>
иhref="#"
создает проблему, удалите его. Вы можете прочитать больше здесьисточник
Это поможет вам остановить полосу прокрутки вверху. У меня это сработало.
источник
Возможна работа с модальными окнами, вложенными где-то в код:
Для меня это была комбинация положения, высоты и перелива.
источник
Я не вижу конкретной ошибки, но я бы посоветовал вам проверить синтаксис html .
Небольшой тест с вашим источником дает мне такие ошибки, как
Это могло быть проблемой.
источник
Самый простой способ решить проблему фона прыжка - определить два параметра:
источник
Я попытался воспроизвести эту проблему на своем локальном хосте, и, как ни странно это может показаться, существует конфликт с файлом Bootstrap JS, который вы используете.
Попробуйте прокомментировать свой код:
И вместо этого используйте Bootstrap 2.3.2:
Это заставило меня работать.
Я попробовал это с помощью Bootstrap версии 3, но это не сработало. Я все еще не могу точно определить
e.preventDefault() is not a function
причину проблемы, но где-то в Firebug мне выдали ошибку - я предполагаю, что это должно быть основной причиной, но я еще не сравнивал ее с другими файлами JS.источник
Я попытался установить верхнюю часть .modal по центру экрана.
Всего лишь 2 цента моих мыслей.
источник
В bootstrap 3.1.1 я решил с помощью этого решения:
источник
у вас есть 2 дополнительных закрывающих
div
тега непосредственно перед<div id="footer">
или после<div id="mainFrame" class="group">
div. Я использую Visual Studio 2012 Express, чтобы проверить это.Удалите эти 2 дополнительных блока и сообщите нам, как это работает. Я удалил лишние div и удалил все пользовательские скрипты. сохранил только ядро jquery и bootstrap в нижнем колонтитуле. вот скриншот окончательного результата. вот игровая площадка jsbin для вас, которая отлично работает.
Я предлагаю вам использовать headjs для загрузки всех скриптов и файлов css. Также не рекомендуется загружать скрипты дважды.
источник
Попробуйте использовать это, чтобы открыть модальное окно, и посмотрите, что произойдет:
источник
Мне нужен был важный атрибут, чтобы исправить это
источник
У меня была такая же проблема с использованием Bootstrap 2.3.2
При переходе по ссылке возникла проблема:
Уловка заключалась в следующем: return false;
и js:
источник
Я потратил на это часы, пробуя все здесь и в других местах. Для использования angularjs-материала мне пришлось отключить анимацию в объекте конфигурации uibModal.open arg.
Например:
Надеюсь, это поможет кому-то другому.
источник
Если вы столкнулись с этой проблемой в программе Angular, добавьте приведенный ниже код в первую строку файла .scss.
источник
У меня была такая же проблема, и я думаю, что разобрался. Вам просто нужно разместить модальный HTML как прямой потомок тега body ! Однако вы можете разместить HTML-код для кнопки, запускающей модальное окно, где угодно. Я считаю, что это позволяет избежать проблем с наследованием и положением CSS, которые вызывают эту проблему.
Пример:
источник
Наконец понял это. НЕ оборачивайте кнопку, нацеленную на модальное окно, в тег привязки.
Плохой
Хорошо
источник
Этот сделал это для меня
источник
Прочитав десятки ответов в течение нескольких часов, я снова скопировал исходный код из файла начальной загрузки и отладил шаг за шагом, чтобы увидеть, что вызвало, что я всегда прыгаю наверх. Поскольку актуальная последняя версия Bootstrap 3 показывает модальное окно в том месте, где вы сейчас находитесь. Я узнал об этом
-webkit-transform: translate3d(0,0,0);
иheight: 100%
в моем теге тела css вызвал такое поведение. Может, это кому-то поможет.источник
У меня работает при смене версии с 3.1.1 на 3.3.7
Если вам не нужно использовать версию 3.3.1, попробуйте заменить.
После изменения хорошо проверить, что остальная часть функции работает правильно.
источник
body.modal-open { position: inherit; }
Для меня это сработало как прелесть.
источник
Я попробовал все приведенные выше примеры - это единственное, что у меня сработало:
Удаление обивки с правой стороны модели - предотвращает прыжок.
источник
высота: 100% - проблема решена, но вы должны добавить правильный "div"
источник
У меня такая же проблема, и ни один из ответов мне не помог. Нашел обходной путь, который выглядит глупо, но работает, по крайней мере, в моем случае.
Я обнаружил, что страница прокручивается вверх только один раз, и после этого следующие открытые модальные окна работают, как ожидалось. Затем я обнаружил, что скрытие любого элемента в DOM вызывает ту же странную прокрутку. Поэтому я просто создал фиктивный div после загрузки страницы, а не скрыл и удалил его, и это решило проблему.
источник
Я столкнулся с той же проблемой. Проблема заключалась в том, что я добавлял класс .modal-open к элементам html и body. Просто добавьте этот класс в тело, и все заработает, как ожидалось.
источник
Попробуйте это работает отлично
источник
это хорошая идея, чтобы исправить это, это похоже на качка!
https://github.com/jschr/bootstrap-modal/issues/131#issuecomment-153405449
источник
Если ответ pstenstrm не работает для вас, попробуйте объединить его с этой HTML-кнопкой замены:
Это должно держать кнопку на экране.
источник