Подтвердить что ты не робот

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

Вы можете проверить ошибку в этом видео.

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

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


Но это не сработает. Кто-нибудь знает, как это исправить? Здесь вы можете увидеть веб-сайт .
Пользователь и пароль: admin/Koodaus1

Мой код:

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

Ответ 1

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

Ответ 2

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

body { padding-right: 0 !important }

Ответ 3

Просто добавьте стиль:

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

Ответ 4

Если вас больше беспокоит связанная с 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

Пожалуйста, посмотрите, это сделает трюк для вас.

Ответ 5

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

Найти эту строку (по умолчанию) .modal открыть {переполнения: скрытый;}

и измените его как .modal-open {overflow: auto; padding-right: 0! important;}

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

Ответ 6

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

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

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

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

Ответ 7

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

Ответ 8

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

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

JQuery

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

Ответ 9

простое исправление

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

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

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

Ответ 10

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

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

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

Ответ 11

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

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

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

Ответ 12

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

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

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

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

И при необходимости просто скройте loginModal modal.

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

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

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

Удачи.

Ответ 13

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

Ответ 14

Чистое решение css.

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

Вы можете заменить 0px тем, что хотите, если хотите поместить на свое тело по какой-либо причине.

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

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

Ответ 15

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

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

Ответ 16

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

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

Ответ 17

У меня такая же проблема с Bootstrap 3.3.7 и мое решение для фиксированного navbar: добавление этого стиля в ваш пользовательский css.

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

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

Ответ 18

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

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

Ответ 19

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

Попробуйте это

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

Ответ 20

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

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

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

Ответ 21

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

Я попробовал "reset" значение paddig-right, когда модаль показывает:

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

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

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

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

Ответ 22

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

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);

Ответ 23

Я пробовал столько всего, но работал у меня немного.

    body {
    font-size: 12px;
    font-family: brownFont;
    padding-right: 0 !important ;
}

Ответ 24

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

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

Ответ 25

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

Ответ 26

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

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

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

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

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

Ответ 27

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

Ответ 28

это должно решить проблему

body {
    padding: 0 !important 
}

Ответ 29

Установите абсолютное положение g в тело:

body {
 position: absolute;
}

Таким образом, отступы больше не будут влиять на тело.