Os modais de bootstrap continuam adicionando preenchimento - direito ao corpo após fechado

Estou usando o bootstrap e o framework Parse para construir um pequeno webapp. Mas esses modais Bootstrap continuam adicionando padding-right to body depois de fechados. Como resolver isso?

Tentei colocar este código no meu javascript:

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

Mas não funciona. Alguém sabe como consertar isso?

Meu código:

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

Estou usando o bootstrap e o framework Parse para construir um pequeno webapp. Mas esses modais Bootstrap continuam adicionando padding-right to body depois de fechados. Como resolver isso?

Isso pode ser uma falha do modal Bootstrap. Pelos meus testes, parece que o problema é que #adminPanelestá sendo inicializado enquanto #loginModalainda não foi totalmente fechado. As soluções alternativas podem ser remover a animação removendo a fadeclasse #adminPanele / #loginModalou definir um tempo limite (~ 500 ms) antes de chamar $('#adminPanel').modal();. Espero que isto ajude.

Acabei de usar a correção de css abaixo e está funcionando para mim

body { padding-right: 0 !important }

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

Acabou de mudar para

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

Uma solução css pura que mantém a funcionalidade de bootstrap como deveria ser.

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

O problema é causado por uma função no jQuery de bootstrap que adiciona um pouco de preenchimento à direita quando uma janela modal é aberta, se houver uma barra de rolagem na página. Isso impede que o conteúdo do seu corpo mude quando o modal abre, e é um bom recurso. Mas está causando esse bug.

Muitas das outras soluções fornecidas aqui quebram esse recurso e fazem seu conteúdo mudar ligeiramente sobre quando o modal é aberto. Esta solução preservará o recurso do modal de bootstrap, não alterando o conteúdo, mas corrigindo o bug.

Se você está mais preocupado com o padding-rightassunto relacionado, pode fazer isso

jQuery :

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

esta vontade addClasspara você bodye então usando esta

CSS :

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

e isso ajudará você a se livrar padding-right.

Mas se você também está preocupado com a ocultação scroll, você também deve adicionar:

CSS :

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

Aqui está o JSFiddle

Por favor, dê uma olhada, ele fará o truque para você.

Basta abrir bootstrap.min.css

Encontre esta linha (padrão)

.modal-open{overflow:hidden;}

e mude como

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

Funcionará para todos os modais do site. Você pode fazer overflow: auto; se você deseja manter a barra de rolagem como está ao abrir o diálogo modal.

Eu tive esse mesmo problema por muito tempo. Nenhuma das respostas aqui funcionou! Mas o seguinte consertou!

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

Existem dois eventos que disparam no fechamento de um modal, primeiro é hide.bs.modale depois é hidden.bs.modal. Você deve ser capaz de usar apenas um.

conserto fácil

adicione esta classe

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

É uma substituição, mas funciona

Acabei de remover a fadeclasse e alterar o efeito de esmaecimento da classe com animation.css. Espero que isso ajude.

removeAttr não funcionará, você removerá a propriedade CSS assim:

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

Sem nenhum valor de propriedade, a propriedade é removida.

Estou carregando o CSS do bootstrap 3.3.0 padrão e tive um problema semelhante. Resolvido ao adicionar este CSS:

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

O importante é que o javascript modal de bootstrap adiciona 15px de preenchimento à direita programaticamente. Meu palpite é que é para compensar a barra de rolagem, mas eu não quero isso.

Com o Bootstrap 4, isso funcionou para mim:

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

Eu tenho o mesmo problema com o Bootstrap 3.3.7 e minha solução para a barra de navegação fixa: Adicionar este estilo ao seu css personalizado.

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

isso fará com que seu modal seja mostrado enquanto a janela de rolagem ainda está funcionando. obrigado, espero que isso ajude você também

Eu sei que esta é uma pergunta antiga, mas nenhuma das respostas a partir daqui removeu o problema em minhas situações semelhantes e achei que seria útil para alguns desenvolvedores lerem minha solução também.

Costumo adicionar CSS ao corpo quando um modal é aberto, nos sites onde ainda é usado bootstrap 3.

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

Minha solução não requer nenhum CSS adicional.

Conforme apontado por @Orland, um evento ainda está acontecendo quando o outro começa. Minha solução é iniciar o segundo evento (mostrando o adminPanelmodal) apenas quando o primeiro estiver concluído (ocultando o loginModalmodal).

Você pode fazer isso anexando um ouvinte ao hidden.bs.modalevento do seu loginModalmodal, como a seguir:

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

E, quando necessário, apenas oculte o loginModalmodal.

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

Claro que você pode implementar sua própria lógica dentro do ouvinte para decidir se quer mostrar ou não o adminPanelmodal.

Você pode obter mais informações sobre Bootstrap Modal Events aqui .

Boa sorte.

Os modelos de bootstrap adicionam esse acolchoamento direto ao corpo se o corpo estiver transbordando.

No bootstrap 3.3.6 (a versão que estou usando), esta é a função responsável por adicionar esse direito de preenchimento ao elemento do corpo: https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js /bootstrap.js#L1180

Uma solução rápida é simplesmente substituir essa função depois de chamar o arquivo bootstrap.js:

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

Isso resolveu o problema para mim.

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

Isto é o que funcionou para mim:

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

Apenas remova o data-targetdo botão e carregue o modal usando jQuery.

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

jQuery:

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

Pesquisei no javascript de bootstrap e descobri que o código Modal define o preenchimento correto em uma função chamada adjustDialog()que é definida no protótipo Modal e exposta no jQuery. Colocar o código a seguir em algum lugar para substituir esta função para não fazer nada funcionou para mim (embora eu não saiba qual é a consequência de não definir isso ainda!)

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

Isso pode resolver o problema

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

Este é um bug de bootstrap e corrigido na v4-dev: https://github.com/twbs/bootstrap/pull/18441 até então adicionar a classe CSS abaixo deve ajudar.

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

Eu tive o mesmo problema com modals e ajax. Foi porque o arquivo JS foi referenciado duas vezes, tanto na primeira página quanto na página chamada por ajax, então quando o modal foi fechado, ele chamou o evento JS duas vezes que, por padrão, adiciona um padding-right de 17px.

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

Funcionou para mim. Observe que a barra de rolagem é forçada no corpo - mas se você tiver uma página de "rolagem" de qualquer maneira, não importa (?)

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

Tente isto

Ele adicionará o padding 0px correto ao corpo após o fechamento modal.

Ocorre quando você abre um modal que o modal anterior ainda não está completamente fechado. Para corrigi-lo basta abrir novo modal no momento em que todos os modais estiverem completamente fechados, verifique os códigos abaixo:

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

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

Agora isso é antigo e todas as soluções oferecidas aqui podem funcionar. Estou apenas adicionando algo novo caso possa ajudar alguém: tive o mesmo problema e percebi que abrir o modal estava adicionando uma margem direita ao meu sidenav (provavelmente uma espécie de herança do preenchimento adicionado ao corpo). Adicionar {margin-right: 0! Important;} ao meu sidenav funcionou.

(Bootstrap v3.3.7) No inspetor do meu navegador, vi que isso é definido diretamente no estilo do elemento propriedade de , que substitui as propriedades da classe.

Eu tentei 'redefinir' o valor paddig-right quando o modal está sendo exibido com:

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

Mas ele volta assim que a janela é redimensionada :( (provavelmente do script pluggin).

Esta solução funcionou para mim:

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

Como @Orland diz, se você estiver usando algum efeito como fade, então precisamos esperar antes de exibir o modal, isso é um pouco hackeado, mas resolverá o problema.

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

Espero que ainda haja alguém que precise dessa resposta. Há uma função chamada resetScrollbar () em bootstrap.js, por alguma razão estúpida os desenvolvedores decidiram adicionar as dimensões da barra de rolagem ao preenchimento do corpo à direita. então, tecnicamente, se você apenas definir o preenchimento à direita como uma string vazia, isso resolverá o problema