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

Я работаю над сайтом с использованием Bootstrap 3.1.0.

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

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

ОТВЕТЫ

Ответ 1

это то, что я нашел в 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;
}

Ответ 2

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}

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

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

Ответ 3

Фиксирование смещения левой проблемы легко выполняется с помощью только CSS.

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

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

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

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

Ответ 4

.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

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

Благодаря ben и cjd.

Этот код, похоже, работает для меня.

Ответ 5

Это сообщение об ошибке для загрузки: https://github.com/twbs/bootstrap/issues/9855

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

$(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

Ответ 6

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

.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;
}

Ответ 8

$('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");
});

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

Ответ 9

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

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

Мой код здесь

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

Ответ 10

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

html, body{
  padding: 0 !important;
}

Ответ 11

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

Ответ 12

Как и в Bootstrap 3.3.2, поведение выглядит так: полосы прокрутки удаляются, когда отображается диалог, и Bootstrap добавляет правильное дополнение к элементу body, чтобы компенсировать пространство, ранее занятое полосой прокрутки. К сожалению, это не мешает сдвигу экрана, по крайней мере, в современных версиях Chrome, IE, Firefox или Safari. Ни одно из исправлений здесь полностью не устраняет эту проблему, но объединение ответов от ben.kaminski и часть ответа от 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 there */
.modal-open {
    overflow: auto;
}

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

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

    .modal-open {
        overflow: auto;
    }   
}

Ответ 14

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

Я использовал как css:

.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

и script:

$(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);
};

Ответ 15

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

Ответ 16

My 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'));
    });

Ответ 17

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

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}


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

Ответ 18

Для Bootstrap версии 3.2.0 эти строки в файле css заполняют ошибку:

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

Решение найдено здесь