Bootstrap modal: фон перескакивает вверх при переключении

111

У меня проблема, с модальным окном. У меня есть кнопка на странице, которая переключает модальное окно. Когда появляется модальное окно, страница переходит наверх.

Я сделал все, что мог, чтобы найти решение и т. Д., Но я действительно потерялся.

РЕДАКТИРОВАТЬ:

Я также пробовал с: $('#myModal').modal('show');но имеет тот же эффект.

javascript  jquery  css  twitter-bootstrap  twitter-bootstrap-3 
— FooBar
источник
Привет, Бенни. Да, вызывающе. Я также пробовал: $ ('# myModal'). Modal ('show'); но имеет тот же эффект.
— FooBar
1
может ли это помочь вам, та же проблема: stackoverflow.com/questions/12894570/…
— Марк,
@Mark, см. Мой ответ ниже ...
— Ravimallya
Я заметил, что если я щелкну в любом месте window, модальное окно срабатывает. Это кажется странным неожиданным. Я удалил buttonvia devtools, и щелчок в любом месте страницы по-прежнему открывал модальное окно. Было ли это желаемое поведение? Интересно, нет ли у вас подходящего селектора для модального события щелчка.
— dward

Ответы:

174

Когда модальное окно открывается, modal-openв <body>тег устанавливается класс . Этот класс устанавливается overflow: hidden;в тело. Добавьте это правило в свою таблицу стилей, чтобы переопределить стиль bootstrap.css:

body.modal-open {
    overflow: visible;
}

Теперь свиток должен оставаться на месте.

— pstenstrm
источник
@pstenstrm, я сомневаюсь. вы сказали переопределить css для класса .modal-open. Но что, если есть дополнительные закрывающие div, и в моем ответе я не переопределил какие-либо классы в моем разрешении? Он отлично работает после удаления 2 лишних div. bs модальное добавление div .modal-backdrop, которое запутается там, где его нужно было закрыть, из-за дополнительных закрывающих тегов.
— Ravimallya
4
У меня не работает, у меня есть модальное окно внутри iframe, и оно прокручивается вверх ... есть идеи?
— Cabuxa.Mapache
5
Это исправило это для меня. Просто чтобы добавить, что корень моей проблемы был «body {height: 100%}».
— PeteG
23
У меня не работает. У меня есть ванильное модальное окно, которое я открываю, .modal('show')но оно все еще прокручивается до верхней части страницы. Bootstrap v3.2.0
— MandM
6
Я должен был добавить position: inheritв этот класс, но после этого работал как шарм.
— adrian3martin 06
28

Если вы вызываете модальное окно с тегом. Попробуйте удалить '#' из атрибута href и вызвать модальное окно с атрибутами данных.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
— Gokhan
источник
Я открываю его точно так же, как вы там написали. Посмотрите ссылку
— FooBar
5
если вы не используете «<button>», а <a>, как в моем случае, вы теряете значок «кнопка пальца» при перемещении курсора мыши на объект. Чтобы преодолеть это, я сделал следующее: ... href = "# mai_modal_id" data-toggle = "modal" ... и я не использовал data-target
— pagurix
3
@pagurix - Ваш комментарий лучше всего подходит для моего сценария.
— AlfredBr
Думаю, @pagurix стоит написать свой комментарий отдельным ответом. Единственное, что помогло. Недурно!
— Vibhor Dube
14

если вы используете тег привязки как <a href"#" ..> ... </a>и href="#"создает проблему, удалите его. Вы можете прочитать больше здесь

— Нимеш Джайн
источник
12 
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

Это поможет вам остановить полосу прокрутки вверху. У меня это сработало.

— Георгий Мирчев
источник
6

Возможна работа с модальными окнами, вложенными где-то в код:

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

Для меня это была комбинация положения, высоты и перелива.

— Деннис Хайден
источник
4

Я не вижу конкретной ошибки, но я бы посоветовал вам проверить синтаксис html .

Небольшой тест с вашим источником дает мне такие ошибки, как

Строка 127, столбец 34: div незакрытого элемента.

              <div class="inner onlySides">

Это могло быть проблемой.

— Билли Джо
источник
Спасибо - я займусь этим - хотя мне трудно поверить, что это может вызвать проблему, с которой я столкнулся. Похоже, вы используете плагин для отслеживания этого - если да; который?
— FooBar 06
Я не использую плагин, кроме firebug. Всегда полезно проверять действительность своей страницы на validator.w3.org . Это будет проблемой, потому что, если у вас открыт div, у вас будет странное поведение :)
— billyJoe
4

Самый простой способ решить проблему фона прыжка - определить два параметра:

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}
— Nils
источник
3

Я попытался воспроизвести эту проблему на своем локальном хосте, и, как ни странно это может показаться, существует конфликт с файлом Bootstrap JS, который вы используете.

Попробуйте прокомментировать свой код:

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>

И вместо этого используйте Bootstrap 2.3.2:

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

Это заставило меня работать.

Я попробовал это с помощью Bootstrap версии 3, но это не сработало. Я все еще не могу точно определить e.preventDefault() is not a functionпричину проблемы, но где-то в Firebug мне выдали ошибку - я предполагаю, что это должно быть основной причиной, но я еще не сравнивал ее с другими файлами JS.

— АйБ
источник
3

Я попытался установить верхнюю часть .modal по центру экрана. 

.modal {
    position: absolute;
    top: 50%;
}

Всего лишь 2 цента моих мыслей.

— Хольгер Тибош
источник
Достаточно близко. Я не буду голосовать против, потому что моя проблема может быть в другом месте, но из-за этого нижняя половина экрана была затемнена, но модальное окно было расположено ближе к центру.
— crafter
3

В bootstrap 3.1.1 я решил с помощью этого решения:

body.modal-open {
    position: absolute !important;
}
— Filo
источник
2
Ты спас мне день @Filo Большое спасибо
— vinothini
2

у вас есть 2 дополнительных закрывающих divтега непосредственно перед <div id="footer">или после <div id="mainFrame" class="group">div. Я использую Visual Studio 2012 Express, чтобы проверить это.

Удалите эти 2 дополнительных блока и сообщите нам, как это работает. Я удалил лишние div и удалил все пользовательские скрипты. сохранил только ядро ​​jquery и bootstrap в нижнем колонтитуле. вот скриншот окончательного результата. вот игровая площадка jsbin для вас, которая отлично работает.

Я предлагаю вам использовать headjs для загрузки всех скриптов и файлов css. Также не рекомендуется загружать скрипты дважды.

введите описание изображения здесь

— Равималья
источник
4
Ответы, получившие отрицательное голосование, требуют надлежащих комментариев с указанием причин.
— Ravimallya
2

Попробуйте использовать это, чтобы открыть модальное окно, и посмотрите, что произойдет:

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
— scooterlord
источник
2 
body.modal-open {
overflow: visible !important;
}

Мне нужен был важный атрибут, чтобы исправить это

— Dizzle
источник
Это сработало для меня, и у меня была проблема @MandM (в комментариях) из ответа pstenstrm: «Не работает для меня. У меня есть ванильный модальный файл, который я открываю с помощью .modal ('show'), и он все еще прокручивается наверх страницы. Bootstrap v3.2.0 ". Единственный странный эффект, который он имеет, заключается в том, что теперь фон будет прокручиваться, если вы продолжите прокручивать модальное окно, которое выше окна, но для меня это незначительная проблема. Спасибо.
— dgig
1

У меня была такая же проблема с использованием Bootstrap 2.3.2

При переходе по ссылке возникла проблема:

Уловка заключалась в следующем: return false;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

и js:

function openModal() {
    $('#myModal').modal('show');
}
— mpccolorado
источник
1

Я потратил на это часы, пробуя все здесь и в других местах. Для использования angularjs-материала мне пришлось отключить анимацию в объекте конфигурации uibModal.open arg.

Например:

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

Надеюсь, это поможет кому-то другому.

— Натан Бич
источник
1

Если вы столкнулись с этой проблемой в программе Angular, добавьте приведенный ниже код в первую строку файла .scss.

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}
— сибашанкар панда
источник
0

У меня была такая же проблема, и я думаю, что разобрался. Вам просто нужно разместить модальный HTML как прямой потомок тега body ! Однако вы можете разместить HTML-код для кнопки, запускающей модальное окно, где угодно. Я считаю, что это позволяет избежать проблем с наследованием и положением CSS, которые вызывают эту проблему.

Пример:

<body>
    <!-- All your other HTML code -->
    <div>
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</body>
— нуноарруда
источник
0

Наконец понял это. НЕ оборачивайте кнопку, нацеленную на модальное окно, в тег привязки.

Плохой

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

Хорошо

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>
— ALFmachine
источник
0

Этот сделал это для меня

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
— Warkitty
источник
У меня была аналогичная проблема с навигационной панелью и прыжком контейнера при открытии модального окна. Это то, что я искал.
— Awhitey98
Рад, что помог!
— warkitty
0

Прочитав десятки ответов в течение нескольких часов, я снова скопировал исходный код из файла начальной загрузки и отладил шаг за шагом, чтобы увидеть, что вызвало, что я всегда прыгаю наверх. Поскольку актуальная последняя версия Bootstrap 3 показывает модальное окно в том месте, где вы сейчас находитесь. Я узнал об этом -webkit-transform: translate3d(0,0,0);и height: 100%в моем теге тела css вызвал такое поведение. Может, это кому-то поможет.

— AlexioVay
источник
0

У меня работает при смене версии с 3.1.1 на 3.3.7

Если вам не нужно использовать версию 3.3.1, попробуйте заменить.

После изменения хорошо проверить, что остальная часть функции работает правильно.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
— пьёт
источник
0

Я попробовал все приведенные выше примеры - это единственное, что у меня сработало:

.modal-open {

            padding-right: 0 !important;

        }

Удаление обивки с правой стороны модели - предотвращает прыжок.

— Стнфордли
источник
0

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

Я обнаружил, что страница прокручивается вверх только один раз, и после этого следующие открытые модальные окна работают, как ожидалось. Затем я обнаружил, что скрытие любого элемента в DOM вызывает ту же странную прокрутку. Поэтому я просто создал фиктивный div после загрузки страницы, а не скрыл и удалил его, и это решило проблему.

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
— Борзило Андрей
источник
0

Я столкнулся с той же проблемой. Проблема заключалась в том, что я добавлял класс .modal-open к элементам html и body. Просто добавьте этот класс в тело, и все заработает, как ожидалось.

— general666
источник
-1

Попробуйте это работает отлично

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
— Minimit
источник
-3

Если ответ pstenstrm не работает для вас, попробуйте объединить его с этой HTML-кнопкой замены:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

Это должно держать кнопку на экране.

— Бен
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.