it-swarm.com.ru

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

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

Я пытался поместить этот код в мой 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 Framework для создания небольшого веб-приложения. Но эти модальности Bootstrap продолжают добавлять отступ справа к телу после закрытия. Как это решить?

72
phuwin

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

44
Orland

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

body { padding-right: 0 !important }
87
Ngatia Frankline

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

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

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

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

11
vivekkupadhyay

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

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

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

10
LXXIII

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

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

.modal-open{overflow:hidden;}

и Правка его как

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

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

8
Ashok Sen

Чистое решение CSS, которое сохраняет функциональность начальной загрузки в должном порядке. 

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

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

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

6
chasmani

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

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

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

2
jcdsr

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

2
febriana andringa

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

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

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

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

1
Benjamin Oats

Модели 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 () { };

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

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

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

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

jQuery:

$("#myBtn").modal('show');
1
Edison D'souza

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

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

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

1
gauravbhai daxini

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

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

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

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

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

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

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

И, когда это необходимо, просто скрыть модальную переменную loginModal.

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

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

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

Удачи.

1
Cleber de Souza Alcântara

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

0
Lucas Almeida

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

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

0
Phil

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

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

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

0
Debrian Ruhut Saragih

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

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;
}
0
Jack

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

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

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

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

    closeModal.modal('hide');
    closeModal.on('hidden.bs.modal', function() {
      $('#new-open-modal').modal('show');
    });
  }
0
Sakata Gintoki
$('.modal').on('hide.bs.modal,hidden.bs.modal', function () {
 setTimeout(function(){
  $('body').css('padding-right',0);
 },1000);
});

Попробуй это 

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

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

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

0
user3666136

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

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

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

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