Twitter Модифицированное открытие/закрытие бутстрапа вызывает фиксированный заголовок для перехода

Я почти закончил с простым 2-страничным веб-сайтом для моих зарегистрированных доменных имен. К сожалению, у меня есть одна небольшая проблема, которую я, кажется, не могу исправить: скачкообразный заголовок, когда модал Twitter Bootstrap открывается и закрывается. На мобильных устройствах проблем нет. Эта проблема возникает только в больших видовых экранах, таких как настольные компьютеры и ноутбуки.

Как воссоздать

  1. Откройте http://www.domains.cloudlabz.nl/domains в веб-браузере и убедитесь, что вы получаете вертикальную полосу прокрутки, уменьшив высоту области просмотра.
  2. Нажмите одну из синих кнопок "Подробнее".
  3. Обратите внимание на прыгающий заголовок и исчезающую полосу прокрутки, как только открывается модальное окно.
  4. Закройте модальное окно и заметьте, что заголовок возвращается назад и снова появляется полоса прокрутки.

Проверьте следующее изображение (тот же результат в Opera, Safari, Firefox и Chrome):

Jumping header issue

Что бы я хотел

Я бы хотел, чтобы заголовок прекратил прыгать при открытии/закрытии модального окна. Тот факт, что полоса прокрутки исчезает, не является проблемой. На самом деле, я бы хотел, чтобы так и оставалось.

Обновление

Я заметил, что прыжковый заголовок происходит только с элементами фиксированной позиции, такими как мой заголовок (добавлен класс Bootstrap navbar-fixed-top). Это даже происходит на самом сайте Bootstrap: http://getbootstrap.com/javascripts. Перейдите в область "Modals> Optional Sizes" на рабочем столе и нажмите одну из кнопок. Вы увидите меню правой стороны, прыгающее вперед и назад.

Когда модальное окно открывается, к элементу body добавляется класс .modal-open (спасибо, что указали на @Pred). Он добавляет отступ в 15 пикселей вправо, равный ширине желоба полосы прокрутки. Это препятствует тому, чтобы тело подпрыгнуло назад и вперед.

К сожалению, это дополнение, очевидно, не относится к фиксированным элементам.

Ответы

Ответ 1

Кажется, я нашел быстрое решение для своей проблемы. Он использует кусок javascript для добавления дополнительного стиля в заголовок (15px padding-right), чтобы он не прыгал. Это может быть не лучшее решение, но на данный момент это работает нормально.

Поскольку в видовых экранах меньше 768px (для мобильных устройств) не было никаких проблем, этот фрагмент кода добавляет дополнительные 15px в более крупные видовые экраны, такие как настольные компьютеры и ноутбуки

<script>

    $(document).ready(function(){

        // Dirty fix for jumping scrollbar when modal opens

        $('#requestModal').on('show.bs.modal', function (e) {
            if ($(window).width() > 768) {
                $(".navbar-default").css("padding-right","15px");
            }
        });

        $('#requestModal').on('hide.bs.modal', function (e) {
            if ($(window).width() > 768) {
                $(".navbar-default").css("padding-right","0px");
            }
        });

    });

</script>

Если вы знаете лучшее решение (желательно только CSS3), сообщите мне. Спасибо за помощь!

Ответ 2

Bootstrap добавляет class="modal-open" и padding-right: 15px; к body, когда отображается модальная мода. Чтобы удалить правую смену и удерживайте полосу прокрутки, добавьте ее в свой css:

body.modal-open {
  overflow: inherit;
  padding-right: 0 !important;
}

Пробовал в bootstrap 3.3.4

Ответ 3

Когда модальный формат открывается, класс modal-open добавляется к элементу HTML <body>, который скрывает переполнение. Вы можете изменить это, перезаписав класс "модально-открытый" с помощью overflow: inherit. Это будет держать панель прокрутки в поле зрения, так же, как и когда модаль закрыт. Имейте в виду, что это изменит опцию переполнения всякий раз, когда какой-либо модальный файл открывается на странице. Надеюсь это поможет. Удачи!

Ответ 4

Все это происходит из-за этой части кода в bootstrap.js:

Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    if (this.scrollbarWidth) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}

Эта неприятная проблема возникает в Firefox 32.0 (Gecko/20100101) и Chromium Version 37.0.2062.94 (Webkit 537.36) (Ubuntu 14.04). Не происходит в QupZilla версии 1.6.6 (WebKit 537.21).

Для меня грязное исправление заключается в том, чтобы прокомментировать условную строку, после чего он работает во всех проверенных мной браузерах (включая некоторые браузеры android).

ПРИМЕЧАНИЕ. Если вы прокомментируете эту строку, вы должны быть осторожны с размером ваших модалов, так как бутстрап не создаст достаточно места для новой полосы прокрутки.

С уважением.

Ответ 5

Как вы обычно ставите Bootstrap navbar в качестве прямого дочернего элемента контейнера body:

<body>
  <nav class="navbar navbar-fixed-top">...</nav>
</body>

Вы можете использовать значение body padding-right, рассчитанное в основном коде Bootstrap, чтобы предотвратить его "прыжок" при открытии модального окна, чтобы исправить проблему navbar. Чистое решение CSS ниже:

.navbar-fixed-top {
  padding-right: inherit;
}

Легко, как это.

Ответ 6

Этот режим работает только в том случае, если вы знаете, что содержание вашей страницы больше, чем область просмотра (так что любая длинная страница прокрутки). Вы можете просто добавить в свой CSS следующее:

html {
  overflow-y: scroll;
}

.modal-open {
  padding-right: 0!important;
}

Ответ 7

Другим решением является добавление:

.modal-open .navbar-fixed-top {
  overflow-y: scroll;
}

чтобы предотвратить его перескакивание. Опять же, легко.

Ответ 8

Я столкнулся с той же проблемой, и я решил ее следующим образом

просто добавьте

body.modal-open {
  position: fixed;
  overflow: scroll;
  width: 100%;
  padding-right: 0!important;
}

Ответ 9

Я вручную изменяю bootstap.js:

перед изменением

Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
  }

  Modal.prototype.resetScrollbar = function () {
    this.$body.css('padding-right', '')
  }

после изменения:

  Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    var headerPad = parseInt(($('.navbar-fixed-top').css('padding-right') || 0), 10)
    if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
    if (this.bodyIsOverflowing) $('.navbar-fixed-top').css('padding-right', headerPad + this.scrollbarWidth)
  }

  Modal.prototype.resetScrollbar = function () {
    this.$body.css('padding-right', '')
    $('.navbar-fixed-top').css('padding-right', '')
  }

Ответ 10

У меня есть структура:

<html>
<body>
  <nav class="navbar navbar-fixed-top">...</nav>
  <section>
    <div class="container">...</div>
  </section>
  <section>
    <div class="container">...</div>
  </section>
  <footer>...</foter>
</body>
</html>

Я использую этот CSS:

body.modal-open {padding-right: 0 !important}
body.modal-open nav,
body.modal-open section,
body.modal-open footer {padding-right: 17px !important}

Ответ 11

Добавьте в свой CSS следующее:

body {
  overflow: inherit;
  padding-right: 0 !important;
}

Ответ 12

Для Bootstrap 4 sticky-top используйте следующий фрагмент. Протестировал все CSS-решения на этой странице, но ни одно из них не сработало для Bootstrap 4.

<script type="text/javascript">

    $('body').on('show.bs.modal', function () {
        $('.sticky-top').css('margin-left', '-=0px');
    });

    $('body').on('hidden.bs.modal', function () {
        $('.sticky-top').css('margin-left', 'auto');
    });

</script>

Дизайн моей страницы был следующим

<header class="container">
    <div class="row">

    </div>
</header>

<div class="container sticky-top">
    <nav class="navbar navbar-expand-lg">
        This div jumped/shifted 17px to the right when opening a modal
    </nav>
</div>

Ответ 13

В моем случае это можно решить путем добавления комментариев или удаления этих двух строк right: 0; и left: 0; в файле bootstrap.css:

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  /* right: 0;
  left: 0; */
  z-index: 1030;
}

Примечание: я использую bootstrap v3.3.7