html5 - español - descargar bootstrap 3

Bootstrap 3 incendios modales y hace que la página se mueva momentáneamente a la izquierda/problemas de la barra de desplazamiento del navegador

Question

Estoy trabajando en un sitio usando Bootstrap 3.1.0.

Notarás cuando se abre la ventana modal, la barra de desplazamiento del navegador simplemente desaparece por una fracción de segundo, luego vuelve. Hace lo mismo cuando lo cierras.

¿Cómo puedo hacerlo para que se abra y se cierre sin interacción con la barra de desplazamiento del navegador? He visto publicaciones en la pila donde la gente estaba teniendo problemas, pero no encuentro una respuesta específica para mi problema, por lo que si alguien más hizo esta solicitud y alguien lo sabe y quiere vincularme a ella, agradecería. eso. He buscado alrededor de 2 horas para esto antes de publicar.

Answer 1

Esta solución funciona para mí !!!!

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}


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

Answer 2

A partir de Bootstrap 3.3.2, el comportamiento parece ser que las barras de desplazamiento se eliminan cuando se muestra el cuadro de diálogo y Bootstrap agrega un margen derecho al elemento del cuerpo para compensar el espacio previamente ocupado por la barra de desplazamiento. Desafortunadamente, esto no evita el cambio de pantalla, al menos en las versiones modernas de Chrome, IE, Firefox o Safari. Ninguna de las correcciones aquí soluciona completamente este problema, pero combinar las respuestas de ben.kaminski y parte de la respuesta de cjd82187 resuelve el problema solo con CSS:

/* removes inline padding added by Boostrap that makes the screen shift left */
.modal-open[style] {
    padding-right: 0px !important;
}

/* keeps Bootstrap from removing the scrollbar if it''s there */
.modal-open {
    overflow: auto;
}

Como mencionó ben.kaminski, el código se agregó a Twitter Bootstrap para que pueda desplazarse y mostrar el modal si está más allá de la parte inferior de la pantalla. Para conservar esa funcionalidad, puede envolver la solución CSS en una consulta de medios, por lo que solo se aplica a las ventanas gráficas grandes, algo como esto:

@media (min-width: 992px) {         
    .modal-open[style] {
        padding-right: 0px !important;
    }

    .modal-open {
        overflow: auto;
    }   
}

Answer 3

Cuando se abre el modal de arranque, la clase .modal-open se establece en etiqueta de cuerpo. En este desbordamiento de etiqueta: oculto está configurado. tenemos que cambiar esto Agrega el código a continuación en tu CSS.

<style>
body.modal-open {
    overflow: visible !important;
}
</style>

Referencia: - Cómo arreglar el fondo modal de Bootstrap scroll to top

Answer 4

En mi caso, la etiqueta del cuerpo ya especifica el overflow:hidden .

Cuando se abre el diálogo modal, también agrega padding-right:17px; al cuerpo

Mi código aquí

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

Answer 5

Este es un problema informado para arrancar: https://github.com/twbs/bootstrap/issues/9855

Y esta es mi solución temporal y rápida y también funciona con una barra de navegación superior fija, solo con javascript. Cargue esta secuencia de comandos junto con su página.

$(document.body)
.on(''show.bs.modal'', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth()
    if (scrollbarWidth) {
        $(document.body).css(''padding-right'', scrollbarWidth);
        $(''.navbar-fixed-top'').css(''padding-right'', scrollbarWidth);    
    }
})
.on(''hidden.bs.modal'', function () {
    $(document.body).css(''padding-right'', 0);
    $(''.navbar-fixed-top'').css(''padding-right'', 0);
});

function getScrollBarWidth () {
    var inner = document.createElement(''p'');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement(''div'');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = ''scroll'';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};

Aquí está el ejemplo de trabajo: http://jsbin.com/oHiPIJi/64

Answer 6

Implementado esta solución simple

.modal-open {

  padding-right: 0 !important;

}

html {

  overflow-y: scroll !important;

}

Answer 7

La reparación del problema de desplazamiento a la izquierda se realiza fácilmente usando solo CSS.

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

Simplemente está sobrescribiendo un estilo en línea que existe en el código. Estoy usando el mío en una compilación de WordPress y el estilo en línea se estaba aplicando al cuerpo. Se veía así:

<body class="home blog logged-in modal-open" style="padding-right: 15px;">

¡Espero que esto ayude a alguien!

Answer 8

Mi página necesitaba una versión modificada del código de Agni Pradharma para evitar que se moviera cuando se mostraba el modal. Tengo un encabezado de navegación fijo y algunas páginas con desplazamiento, algunas sin. Demostración aquí: http://jsbin.com/gekenakoki/1/

Usé ambos css:

.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
} 

y el guion:

$(document.body)
.on(''show.bs.modal'', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth();
    if (scrollbarWidth) {
        $(document.body).css(''padding-left'', scrollbarWidth); 
    }
})
.on(''hidden.bs.modal'', function () {
    $(document.body).css(''padding-left'', 0);
});

function getScrollBarWidth () {
    var inner = document.createElement(''p'');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement(''div'');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = ''scroll'';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};

Answer 9

Mi solución Jquery:

var nb = $(''nav.navbar-fixed-top'');
$(''.modal'')
    .on(''show.bs.modal'', function () {
        nb.width(nb.width());
    })
    .on(''hidden.bs.modal'', function () {
        nb.width(nb.width(''auto''));
    });

Answer 10

Ninguno de los elementos de esta página me funcionó en la versión 3.3.4 y 3.3.5. Agregar este CSS me ha solucionado el problema.

body {
padding-right:0px !important;
margin-right:0px !important;
}

Answer 11

Para Bootstrap versión 3.2.0, estas líneas en el archivo de css rellenan el error:

.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
padding-right: 17px;
}

Solución encontrada here

Answer 12

Si ha fijado la barra de navegación y no desea desplazar el cuerpo hacia arriba cuando se abre el modal, use este estilo

.modal-open {
    overflow: visible;
}
.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    padding-right:0px!important;
}

Answer 13

esto es lo que encontré en github cuando busco este problema y para mí funciona bien

js:

    $(document).ready(function () {
    $(''.modal'').on(''show.bs.modal'', function () {
        if ($(document).height() > $(window).height()) {
            // no-scroll
            $(''body'').addClass("modal-open-noscroll");
        }
        else {
            $(''body'').removeClass("modal-open-noscroll");
        }
    });
    $(''.modal'').on(''hide.bs.modal'', function () {
        $(''body'').removeClass("modal-open-noscroll");
    });
})

css usa este CSS si tienes nav-fixed-top y navbar-fixed-bottom :

body.modal-open-noscroll
{
    margin-right: 0!important;
    overflow: hidden;
}
.modal-open-noscroll .navbar-fixed-top, .modal-open .navbar-fixed-bottom
{
    margin-right: 0!important;
}

o usuario este css si tiene navbar-default

body.modal-open-noscroll 
{
  margin-right: 0!important;
  overflow: hidden;
}
.modal-open-noscroll .navbar-default, .modal-open .navbar-default 
{
  margin-right: 0!important;
}

Answer 14

para resolver el problema que causa que la página se desplace hacia la derecha

html, body{
  padding: 0 !important;
}

Answer 15

si alguien está usando react-bootstrap la solución es un poco más compleja porque react-bootstrap aplica estilos en línea al elemento del body para manipular los estilos de overflow y padding . Esto significa que debe anular esos estilos en línea con !important

body.modal-open {
  // enable below if you want to additionally allow scrolling with the modal displayed
  // overflow: auto !important;

  // prevent the additional padding from being applied
  padding: 0 !important;
}

NOTA : si no habilita el desplazamiento (es decir, hace que la barra de desplazamiento sea visible) al descomentar el estilo de overflow , el contenido de la página parecerá desplazarse por el ancho de la barra de desplazamiento (si la barra de desplazamiento estaba previamente visible).

Answer 16

html, body{
    padding-right: 0px !important; 
    position: relative!important;
}

prueba este código realmente está funcionando

Answer 17

$(''body'').on(''show.bs.modal'', function () {
    if ($("body").innerHeight() > $(window).height()) {
        $("body").css("margin-right", "17px");
    }
}); 

$(''body'').on(''hidden.bs.modal'', function (e) {
    $("body").css("margin-right", "0px");
});

Esta pequeña solución simula la barra de desplazamiento cuando se muestra el modal, agregando un margen derecho al cuerpo.

Answer 18

.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

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

Gracias a ben y cjd.

El código anterior parece funcionar para mí.

Answer 19

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}

Me desharé de eso. Esto se agregó para hacer que los modales funcionen de manera más receptiva, por lo que podría desplazarse hacia abajo y ver un modal si la pantalla era demasiado corta. También evita que el fondo se pueda desplazar mientras que un modal está activo. Si no necesita esa funcionalidad, puede usar esa CSS que publiqué.

Algo más de información: Están configurando .modal-open en el cuerpo, lo que evita todo desplazamiento en el cuerpo y oculta la barra de desplazamiento del cuerpo. Luego, cuando aparece el modal, tiene el fondo oscuro que ocupa toda la pantalla, y tiene overflow-y: scroll que obliga a la barra de desplazamiento a volver, por lo que si el modal extendido pasa la parte inferior de la pantalla, puede desplazarse fondo oscuro y vea el resto.