Bootstrap 3 modal срабатывает и заставляет страницу мгновенно сдвигаться влево / проблемы с полосой прокрутки браузера

Я работаю на сайте, используя Bootstrap 3.1.0.

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

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

20 ответов


это то, что я нашел в github, когда я ищу об этой проблеме, и для меня это отлично работает

js:

    $(document).ready(function () {
    $('.modal').on('show.bs.modal', function () {
        if ($(document).height() > $(window).height()) {
            // no-scroll
            $('body').addClass("modal-open-noscroll");
        }
        else {
            $('body').removeClass("modal-open-noscroll");
        }
    });
    $('.modal').on('hide.bs.modal', function () {
        $('body').removeClass("modal-open-noscroll");
    });
})

в CSS используйте этот CSS, если у вас есть nav-fixed-top и navbar-фиксированное дно:

body.modal-open-noscroll
{
    margin-right: 0!important;
    overflow: hidden;
}
.modal-open-noscroll .navbar-fixed-top, .modal-open .navbar-fixed-bottom
{
    margin-right: 0!important;
}

или пользователь этого css, если у вас есть navbar-default

body.modal-open-noscroll 
{
  margin-right: 0!important;
  overflow: hidden;
}
.modal-open-noscroll .navbar-default, .modal-open .navbar-default 
{
  margin-right: 0!important;
}

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}

избавится от него. Это было добавлено, чтобы сделать модалы работать более отзывчиво, так что вы можете прокрутить вниз и увидеть модальный, если экран был слишком коротким. Он также останавливает прокручивание фона во время модального режима. Если вам не нужна эта функциональность, вы можете использовать тот css, который я опубликовал.

дополнительная информация: они устанавливаются .modal-открыть на теле, что предотвращает прокрутку всего тела и скрывает полосу прокрутки тела. Затем, когда модальный подходит к нему имеет темный фон, который занимает весь экран, и который имеет overflow-y: scroll, который заставляет полосу прокрутки возвращаться, поэтому, если модальный расширенный прошел в нижней части экрана, вы все равно можете прокручивать темный фон и видеть остальную его часть.


исправление смещения левой проблемы легко сделать, используя только CSS.

.modal-open[style] {
padding-right: 0px !important;
}

вы просто перезаписываете встроенный стиль, который существует в коде. Я использую мой в сборке WordPress, и встроенный стиль применялся к телу. Выглядело это так:

<body class="home blog logged-in modal-open" style="padding-right: 15px;">

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


.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

.modal-open[style] {
    padding-right: 0px !important;
}

спасибо Бену и cjd.

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


об этом сообщается в bootstrap:https://github.com/twbs/bootstrap/issues/9855

и это мое временное быстрое исправление, а также работа с фиксированной верхней навигационной панелью, только с использованием javascript. Загрузите этот сценарий вместе со своей страницей.

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth()
    if (scrollbarWidth) {
        $(document.body).css('padding-right', scrollbarWidth);
        $('.navbar-fixed-top').css('padding-right', scrollbarWidth);    
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-right', 0);
    $('.navbar-fixed-top').css('padding-right', 0);
});

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};

вот рабочий пример:http://jsbin.com/oHiPIJi/64


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

.modal-open {
    overflow: visible;
}
.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    padding-right:0px!important;
}

ни один из элементов на этой странице не работал для меня в версиях 3.3.4 и 3.3.5 Добавление этого CSS решило проблему для меня.

body {
padding-right:0px !important;
margin-right:0px !important;
}

$('body').on('show.bs.modal', function () {
    if ($("body").innerHeight() > $(window).height()) {
        $("body").css("margin-right", "17px");
    }
}); 

$('body').on('hidden.bs.modal', function (e) {
    $("body").css("margin-right", "0px");
});

Это небольшое исправление имитирует полосу прокрутки при отображении модального, добавляя поле справа от тела.


в моем случае тег body уже указывает overflow:hidden.

когда открывается модальный диалог, он также добавляет padding-right:17px; в тело.

мой код здесь

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

чтобы решить проблему, вызывающую смещение страницы вправо

html, body{
  padding: 0 !important;
}

html, body{
    padding-right: 0px !important; 
    position: relative!important;
}

попробуйте этот код действительно, это работает


это решение работает для меня!!!!

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}


.modal-open[style] {
padding-right: 0px !important;
}

начиная с Bootstrap 3.3.2 поведение, по-видимому, заключается в том, что полосы прокрутки удаляются, когда отображается диалоговое окно, и Bootstrap добавляет некоторое правое дополнение к элементу body для компенсации пространства, ранее занятого полосой прокрутки. К сожалению, это не предотвращает сдвиг экрана, по крайней мере, в современных версиях Chrome, IE, Firefox или Safari. Ни одно из исправлений здесь полностью не устраняет эту проблему, но объединяет ответы от Бена.Каминский и часть ответа от cjd82187 разрешаются проблема только с CSS:

/* removes inline padding added by Boostrap that makes the screen shift left */
.modal-open[style] {
    padding-right: 0px !important;
}

/* keeps Bootstrap from removing the scrollbar if it's there */
.modal-open {
    overflow: auto;
}

Как отметил Бен.kaminski, код был добавлен в Twitter Bootstrap, чтобы вы могли прокручивать, чтобы вывести модальный вид, если он находится за нижней частью экрана. Чтобы сохранить эту функциональность, вы можете обернуть решение CSS в медиа-запрос, чтобы оно применялось только к большим видовым экранам, что-то вроде этого:

@media (min-width: 992px) {         
    .modal-open[style] {
        padding-right: 0px !important;
    }

    .modal-open {
        overflow: auto;
    }   
}

когда откроется модальный загрузчик .modal-класс open имеет значение тег body. В этом теге overflow: hidden установлен. мы должны это изменить. Добавьте приведенный ниже код в свой CSS.

<style>
body.modal-open {
    overflow: visible !important;
}
</style>

ссылка :- как исправить Bootstrap модальный фон прокрутки вверх


моей странице нужна была модифицированная версия кода Агни Прадхармы, чтобы он не смещался, когда модальный был показан. У меня есть фиксированный заголовок nav и некоторые страницы со прокруткой, некоторые без. Демо здесь: http://jsbin.com/gekenakoki/1/

я использовал оба css:

.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
} 

и скрипт:

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth();
    if (scrollbarWidth) {
        $(document.body).css('padding-left', scrollbarWidth); 
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-left', 0);
});

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};

если кто-то, используя react-bootstrap решение просто немного сложнее, потому что react-bootstrap применяет встроенные стили к body элемент для управления overflow и padding стили. Это означает, что вы должны переопределить встроенные стили с !important

body.modal-open {
  // enable below if you want to additionally allow scrolling with the modal displayed
  // overflow: auto !important;

  // prevent the additional padding from being applied
  padding: 0 !important;
}

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


мое решение Jquery:

var nb = $('nav.navbar-fixed-top');
$('.modal')
    .on('show.bs.modal', function () {
        nb.width(nb.width());
    })
    .on('hidden.bs.modal', function () {
        nb.width(nb.width('auto'));
    });

для Bootstrap версии 3.2.0 эта строка в css-файле fill исправляет ошибку:

.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
padding-right: 17px;
}

решение здесь


реализовано это простое решение

.modal-open {

  padding-right: 0 !important;

}

html {

  overflow-y: scroll !important;

}

лучшим решением для меня было использовать эти параметры. Он работает для веб-и мобильных

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