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

Я работаю на сайте с помощью Bootstrap 3.1.0.

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

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

20 63
html5 twitter-bootstrap twitter-bootstrap-3 responsive-design

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-fixed-bottom:

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;
}
19
.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}

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

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

87

исправление смещения влево проблема легко сделать с помощью CSS в одиночку.

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

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

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

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

61
.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

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

спасибо Бену и болезни Крейцфельда-Якоба.

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

30

об этом сообщается в 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

8

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

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

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

body {
padding-right:0px !important;
margin-right:0px !important;
}
5
$('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");
});

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

4

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

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

мой код здесь

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

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

html, body{
  padding: 0 !important;
}
2

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

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

2

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

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}


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

начиная с 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;
    }   
}
1

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

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

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

1

Моя страница нуждалась в модифицированной версии кода Агни Прадхармы, чтобы он не смещался, когда показывался модальный. У меня есть фиксированный заголовок 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);
};
0

если кто-то, используя 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 стиль, то содержимое страницы будет отображаться для переключения на полосу прокрутки ширина (если полоса прокрутки была ранее видна, что есть).

0

мое решение 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'));
    });
0

для Bootstrap версии 3.2.0 эта строка в CSS file fill исправляет ошибку:

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

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

0

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

.modal-open {

  padding-right: 0 !important;

}

html {

  overflow-y: scroll !important;

}
0

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

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