Bootstrap Modals sigue agregando relleno al cuerpo después de cerrado

Estoy usando bootstrap y Parse framework para construir una pequeña aplicación web. Pero esos modales de Bootstrap siguen agregando padding-right to body después de cerrado. ¿Cómo solucionar esto?

Traté de poner este código en mi javascript:

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

Pero no funciona. Sabe alguien cómo arreglar esto?

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

Estoy usando bootstrap y Parse framework para construir una pequeña aplicación web. Pero esos modales de Bootstrap siguen agregando padding-right to body después de cerrado. ¿Cómo solucionar esto?

Esto podría ser un problema técnico de Bootstrap modal. Según mis pruebas, parece que el problema es que #adminPanelse está inicializando mientras #loginModalaún no se ha cerrado por completo. Las soluciones pueden ser la eliminación de la animación mediante la eliminación de la fadeclase a #adminPanely #loginModalo establecer un tiempo de espera (~ 500 ms) antes de llamar $('#adminPanel').modal();. Espero que esto ayude.

Acabo de usar la corrección css a continuación y me está funcionando

body { padding-right: 0 !important }

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

Acaba de cambiar a

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

Una solución CSS pura que mantiene la funcionalidad de arranque como debería ser.

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

El problema es causado por una función en el bootstrap jQuery que agrega un poco de relleno a la derecha cuando se abre una ventana modal, si hay una barra de desplazamiento en la página. Eso evita que el contenido de su cuerpo cambie cuando se abre el modal, y es una buena característica. Pero está causando este error.

Muchas de las otras soluciones proporcionadas aquí rompen esa característica y hacen que su contenido cambie ligeramente cuando se abre el modal. Esta solución preservará la función del modal de arranque sin cambiar el contenido, pero corregirá el error.

Si está más preocupado por lo padding-rightrelacionado, puede hacer esto

jQuery :

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

esta voluntad addClassa tu bodyy luego usar esto

CSS :

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

y esto te ayudará a deshacerte de él padding-right.

Pero si también te preocupa la ocultación scroll, debes agregar esto también:

CSS :

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

Aquí está el JSFiddle

Échale un vistazo, te servirá.

Simplemente abra bootstrap.min.css

Encuentra esta línea (predeterminada)

.modal-open{overflow:hidden;}

y cámbialo como

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

Funcionará para todos los modos del sitio. Puede hacer overflow: auto; si desea mantener la barra de desplazamiento como está mientras abre el diálogo modal.

Tuve este mismo problema durante mucho tiempo. ¡Ninguna de las respuestas aquí funcionó! ¡Pero lo siguiente lo solucionó!

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

Hay dos eventos que se activan al cerrar un modal, primero es hide.bs.modaly luego es hidden.bs.modal. Debería poder usar solo uno.

arreglo fácil

agrega esta clase

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

Es una anulación pero funciona

Acabo de eliminar la fadeclase y cambiar el efecto de desvanecimiento de la clase con animation.css. Espero que esto sea de ayuda.

removeAttr no funcionará, deberá eliminar la propiedad CSS de esta manera:

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

Sin valor de propiedad, la propiedad se elimina.

Estoy cargando el Bootstrap 3.3.0 CSS predeterminado y tuve un problema similar. Resuelto agregando este CSS:

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

Lo importante es que bootstrap modal javascript agrega 15px de relleno a la derecha de manera programática. Supongo que es para compensar la barra de desplazamiento, pero no quiero eso.

Con Bootstrap 4 esto funcionó para mí:

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

Tengo el mismo problema con Bootstrap 3.3.7 y mi solución para la barra de navegación fija: Agregar este estilo a su CSS personalizado.

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

hará que su modal se muestre mientras la ventana de desplazamiento aún funciona. gracias, espero que esto también te ayude

Sé que esta es una pregunta antigua, pero ninguna de las respuestas de aquí eliminó el problema en mis situaciones similares y pensé que sería útil que algunos desarrolladores también leyeran mi solución.

Utilizo para agregar algo de CSS al cuerpo cuando se abre un modal, en los sitios web donde todavía se usa bootstrap 3.

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

Mi solución no requiere CSS adicional.

Como señaló @Orland, un evento todavía está sucediendo cuando comienza el otro. Mi solución es iniciar el segundo evento (mostrando el adminPanelmodal) solo cuando el primero haya terminado (ocultando el loginModalmodal).

Puede lograrlo adjuntando un oyente al hidden.bs.modalevento de su loginModalmodal como se muestra a continuación:

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

Y, cuando sea necesario, simplemente oculte el loginModalmodal.

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

Por supuesto, puedes implementar tu propia lógica dentro del oyente para decidir si mostrar o no el adminPanelmodal.

Puede obtener más información sobre Bootstrap Modal Events aquí .

Buena suerte.

Los modelos Bootstrap agregan ese acolchado directamente al cuerpo si el cuerpo se desborda.

En bootstrap 3.3.6 (la versión que estoy usando), esta es la función responsable de agregar ese relleno directamente al elemento del cuerpo: https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js /bootstrap.js#L1180

Una solución rápida es simplemente sobrescribir esa función después de llamar al archivo bootstrap.js:

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

Esto solucionó el problema para mí.

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

Esto es lo que funcionó para mí:

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

Simplemente elimine el data-targetdel botón y cargue el modal usando jQuery.

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

jQuery:

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

Busqué en el javascript bootstrap y descubrí que el código modal establece el relleno correcto en una función llamada adjustDialog()que está definida en el prototipo modal y expuesta en jQuery. Colocar el siguiente código en algún lugar para anular esta función y no hacer nada funcionó para mí (¡aunque no sé cuál es la consecuencia de no configurar esto todavía!)

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

Esto puede resolver el problema.

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

Este es un error de arranque y se corrigió en v4-dev: https://github.com/twbs/bootstrap/pull/18441 hasta entonces, agregar la clase CSS a continuación debería ayudar.

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

Tuve el mismo problema al usar modales y ajax. Fue porque se hizo referencia al archivo JS dos veces, tanto en la primera página como en la página llamada por ajax, por lo que cuando se cerró modal, llamó al evento JS dos veces que, por defecto, agrega un padding-right de 17px.

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

Trabajó para mi. Tenga en cuenta que la barra de desplazamiento está forzada en el cuerpo, pero si tiene una página de "desplazamiento" de todos modos, no importa (?)

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

Prueba esto

Agregará el relleno 0px a la derecha del cuerpo después del cierre modal.

Ocurre cuando abre un modal que el modal anterior aún no está completamente cerrado. Para solucionarlo, simplemente abra un nuevo modal en el momento en que todos los modales estén completamente cerrados, verifique los códigos a continuación:

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

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

Ahora esto es viejo, y todas las soluciones que se ofrecen aquí pueden funcionar. Solo estoy agregando algo nuevo en caso de que pueda ayudar a alguien: tuve el mismo problema y noté que al abrir el modal estaba agregando un margen derecho a mi sidenav (probablemente una especie de herencia del relleno agregado al cuerpo). Agregar {margin-right: 0! Important;} a mi navegación lateral hizo el truco.

(Bootstrap v3.3.7) Desde el inspector de mi navegador, vi que esto se establece directamente en la propiedad de estilo del elemento , que anula las propiedades de la clase.

Intenté 'restablecer' el valor de paddig-right cuando el modal se muestra con:

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

Pero vuelve tan pronto como se cambia el tamaño de la ventana :( (probablemente desde el script del complemento).

Esta solución funcionó para mí:

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 dice @Orland, si está usando algún efecto como el desvanecimiento, entonces tenemos que esperar antes de mostrar el modal, esto es un poco hacky, pero funcionará.

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 todavía haya alguien que necesite esta respuesta. Hay una función llamada resetScrollbar () en bootstrap.js, por alguna estúpida razón, los desarrolladores decidieron agregar las dimensiones de la barra de desplazamiento al relleno del cuerpo a la derecha. entonces, técnicamente, si solo configura el relleno derecho en una cadena vacía, solucionará el problema