Bootstrap Modals продолжают добавлять отступы справа от тела после закрытия

Я использую фреймворк bootstrap и Parse для создания небольшого веб-приложения. Но эти модальные окна Bootstrap продолжают добавлять padding-right к телу после закрытия. Как это решить?

Я попытался поместить этот код в свой javascript:

$('.modal').on('hide.bs.modal', function (e) {
    $("element.style").css("padding-right","0");
});

Но не работает. Кто-нибудь знает, как это исправить?

Мой код:

        <button type="button" class="btn btn-lg btn-default" data-toggle="modal" data-target="#loginModal">Admin panel</button>

         <div id="loginModal" class="modal fade" role="dialog">
                  <div class="modal-dialog modal-sm">

                    <!-- Modal content -->
                    <div class="modal-content">

                      <!-- header -->
                      <div class="modal-header"> 
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Login</h4>
                      </div>

                      <!-- body -->
                      <div class="modal-body text-center" >
                          <input class='form-control' type="text" id="userName" placeholder="Username" ng-model='username'>
                          <input class='form-control' type="password" id="password" placeholder="Password" ng-model='password'>

                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="loginButton" ng-click="goToAdminPanel()">Login</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeButton">Close</button>
                      </div>

                    </div>

                 </div>
                </div>
           </div>

        <div id="adminPanel" class="modal fade" role="dialog">
                  <div class="modal-dialog modal-lg">

                    <!-- Modal content -->
                    <div class="modal-content">

                      <!-- header -->
                      <div class="modal-header"> 
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Admin Panel</h4>
                      </div>

                      <!-- body -->
                      <div class="modal-body" >

                        </div>

                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="saveButton">Save</button>

                        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeButton">Close</button>



                    </div>

                 </div>
                </div>
           </div>

    $scope.goToAdminPanel = function(){
    Parse.User.logIn($scope.username,$scope.password,{
        success: function(user){
            $('#loginModal').modal('hide');
            $('#adminPanel').modal();
        },
        error: function(user, error) {
            alert('Wrong username and/or password');
        }
    });
}

Я использую фреймворк bootstrap и Parse для создания небольшого веб-приложения. Но эти модальные окна Bootstrap продолжают добавлять padding-right к телу после закрытия. Как это решить?

Это может быть сбой из модального окна Bootstrap. Судя по моим тестам, проблема в том #adminPanel, что инициализируется, хотя #loginModalеще не полностью закрыто. В обходном может быть удаление анимации, удалив fadeкласс на #adminPanelи #loginModalили установить тайм - аут (~ 500 мс) перед вызовом $('#adminPanel').modal();. Надеюсь это поможет.

Я только что использовал исправление css ниже, и оно у меня работает

body { padding-right: 0 !important }

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

Просто изменил на

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

Чистое решение css, сохраняющее функциональность начальной загрузки такой, какой она должна быть.

body:not(.modal-open){
  padding-right: 0px !important;
}

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

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

Если вас больше беспокоит padding-rightсвязанное с этим, то вы можете сделать это

jQuery :

$('#loginModal').on('show.bs.modal', function (e) {
     $('body').addClass('test');
});

это будет addClassдля вас, bodyа затем использовать это

CSS :

.test[style] {
     padding-right:0 !important;
 }

и это поможет вам избавиться padding-right.

Но если вас также беспокоит скрытие, scrollвы также должны добавить это:

CSS :

.test.modal-open {
    overflow: auto;
 }

Вот JSFiddle

Пожалуйста, посмотрите, он поможет вам.

Просто откройте bootstrap.min.css

Найдите эту строку (по умолчанию)

.modal-open{overflow:hidden;}

и измените его как

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

Он будет работать для всех модальных окон сайта. Вы можете сделать переполнение: авто; если вы хотите сохранить полосу прокрутки, как она есть при открытии модального диалога.

У меня была такая же проблема ОЧЕНЬ долгое время. Ни один из ответов здесь не работал! Но следующее исправило это!

$(document.body).on('hide.bs.modal,hidden.bs.modal', function () {
    $('body').css('padding-right','0');
});

Есть два события, которые запускаются при закрытии модального окна: сначала это hide.bs.modal, а затем это hidden.bs.modal. Вы должны иметь возможность использовать только один.

легко исправить

добавить этот класс

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

Это переопределение, но работает

Я просто удалил fadeкласс и изменил эффект затухания класса на animation.css. Я надеюсь, это поможет.

removeAttr не сработает, вам нужно удалить свойство CSS следующим образом:

        $('.modal').on('hide.bs.modal', function (e) {
            e.stopPropagation();
            $('body').css('padding-right','');
        }); 

При отсутствии значения свойства свойство удаляется.

Я загружаю CSS-код начальной загрузки 3.3.0 по умолчанию, и у меня возникла аналогичная проблема. Решено добавлением этого CSS:

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

! Важно, потому что модальный javascript начальной загрузки программно добавляет 15px отступа вправо. Я предполагаю, что это компенсирует полосу прокрутки, но я не хочу этого.

С Bootstrap 4 это сработало для меня:

$(selector).on('hide.bs.modal', function (e) {
    $('body').css('padding-right','0');
});

У меня такая же проблема с Bootstrap 3.3.7 и моим решением для фиксированной панели навигации: добавление этого стиля в ваш собственный CSS.

.modal-open {
    padding-right: 0px !important;
    overflow-y: scroll;
}

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

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

Я использую, чтобы добавить немного CSS в тело при открытии модального окна на веб-сайтах, где он все еще используется bootstrap 3.

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

Мое решение не требует дополнительных CSS.

Как указывает @Orland, одно событие все еще происходит, когда начинается другое. Мое решение - запустить второе событие (показывающее adminPanelмодальное окно) только после завершения первого (скрытие loginModalмодального).

Вы можете сделать это, прикрепив слушателя к hidden.bs.modalсобытию вашего loginModalмодального окна, как показано ниже:

$('#loginModal').on('hidden.bs.modal', function (event) {
    $('#adminPanel').modal('show');
}

А при необходимости просто скройте loginModalмодальное окно.

$('#loginModal').modal('hide');

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

Вы можете получить больше информации о модальных событиях Bootstrap здесь .

Удачи.

Модели Bootstrap добавляют этот padding-right к телу, если тело переполнено.

В bootstrap 3.3.6 (версия, которую я использую) это функция, отвечающая за добавление этого padding-right к элементу body: https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js /bootstrap.js#L1180

Быстрый обходной путь - просто перезаписать эту функцию после вызова файла bootstrap.js:

$.fn.modal.Constructor.prototype.setScrollbar = function () { };

Это устранило проблему для меня.

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

Вот что сработало для меня:

body.modal-open {
    overflow: auto !important;
}

// Bootstrap uses JS to set the element style so you can
// override those styles like this
body.modal-open[style] {
    padding-right: 0px !important;
}

Просто удалите data-targetс кнопки и загрузите модальное окно с помощью jQuery.

<button id='myBtn' data-toggle='modal'>open modal</button>

jQuery:

$("#myBtn").modal('show');

Я покопался в javascript начальной загрузки и обнаружил, что модальный код устанавливает правильное заполнение в вызываемой функции, adjustDialog()которая определена в модальном прототипе и отображается в jQuery. Размещение следующего кода где-нибудь, чтобы переопределить эту функцию, чтобы она ничего не делала, помогло мне (хотя я не знаю, каковы последствия того, что эта функция пока не установлена ​​!!)

$.fn.modal.Constructor.prototype.adjustDialog = function () { };

Это может решить проблему

.shop-modal.modal.fade.in {
    padding-right: 0px !important;
}

Это ошибка начальной загрузки, исправленная в v4-dev: https://github.com/twbs/bootstrap/pull/18441, до тех пор добавление класса CSS ниже должно помочь.

.fixed-padding {
  padding-right: 0px !important;
}

У меня была такая же проблема с модальными окнами и ajax. Это произошло из-за того, что файл JS упоминался дважды, как на первой странице, так и на странице, вызванной ajax, поэтому, когда модальное окно было закрыто, оно дважды вызывало событие JS, которое, по умолчанию, добавляет право отступа 17 пикселей.

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

Работал у меня. Обратите внимание, что полоса прокрутки принудительно установлена ​​в теле, но если у вас есть "прокручиваемая" страница, это не имеет значения (?)

$('.modal').on('hide.bs.modal,hidden.bs.modal', function () {
 setTimeout(function(){
  $('body').css('padding-right',0);
 },1000);
});

Попробуй это

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

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

  showModal() {
    let closeModal = $('#your-modal');

    closeModal.modal('hide');
    closeModal.on('hidden.bs.modal', function() {
      $('#new-open-modal').modal('show');
    });
  }

Теперь это устарело, и все предлагаемые здесь решения могут работать. Я просто добавляю что-то новое на случай, если это может кому-то помочь: у меня была такая же проблема, и я заметил, что открытие модального окна добавляло маржу справа в мою боковую навигацию (вероятно, своего рода наследование от дополнения, добавленного к телу). Добавление {margin-right: 0! Important;} в мою навигационную панель помогло.

(Bootstrap v3.3.7) Из своего инспектора браузера я увидел, что это прямо установлено в свойстве стиля элемента , ведьма переопределяет свойства класса.

Я попытался «сбросить» значение paddig-right, когда модальное окно отображается с помощью:

$("#myModal").on('shown.bs.modal', function(){
    $(this).css({paddingRight:""});
});

Но он возвращается, как только изменяется размер окна :( (вероятно, из сценария плагина).

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

var modal_needfix=true;
$("#myModal").on('shown.bs.modal', function(){
    var modalscope=$(this);
    modalscope.css({paddingRight:""});
    if(modal_needfix){
        window.addEventListener("resize",function(){
            requestAnimationFrame(function(){// be sure to act after the pluggin script
                modalscope.css({paddingRight:""});
            });
        });
        modal_needfix=false;
    }
});

Как говорит @Orland, если вы используете какой-то эффект, такой как затухание, тогда нам нужно подождать, прежде чем отображать модальное окно, это немного взломано, но поможет.

function defer(fn, time) {
    return function () {
        var args = arguments,
            context = this;

        setTimeout(function () {
            fn.apply(context, args);
        }, time);
    };
}

$.fn.modal.Constructor.prototype.show = defer($.fn.modal.Constructor.prototype.show, 350);

Надеюсь, этот ответ еще найдется. В bootstrap.js есть функция под названием resetScrollbar (), по какой-то глупой причине разработчики решили добавить размеры полосы прокрутки к правому отступу тела. поэтому технически, если вы просто установите правое заполнение в пустую строку, это решит проблему