example - modal jquery

Twitter Bootstrap modal empuja contenido html a la izquierda

Question

Si abro un cuadro de diálogo modal, a través de Twitter Bootstrap, me he dado cuenta de que empuja todo el contenido html de la página (es decir, en el container ) hacia la izquierda un poco, y luego lo vuelve a poner en normal después de cerrarse. Sin embargo, esto solo ocurre si el ancho del navegador es lo suficientemente grande como para no estar en la consulta de medios "móvil" (es decir, la más pequeña). Esto ocurre con las últimas versiones de FF y Chrome (no han probado otros navegadores).

Puede ver el problema aquí: http://jsfiddle.net/jxX6A/2/

Nota: Debe aumentar el ancho de la ventana "Resultado" para que cambie a la consulta de medios "med" o "grande" css.

Configuré el código HTML de la página según los ejemplos que se muestran en el sitio de Bootstrap:

<div class=''container''>
    <div class=''page-header''>
        <h4>My Heading</h4>
    </div>
    <div id=''content''>
        This is some content.
    </div>
    <div class=''footer''>
        <p>&copy; 2013, me</p>
    </div>
</div>

Supongo que esto no debería suceder, pero no estoy seguro de lo que hice mal.

EDITAR: Este es un error conocido, para obtener más información (y actualizada), consulte: https://github.com/twbs/bootstrap/issues/9855

Answer 1

Ajusté esta respuesta más arriba en este hilo por TBAG

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

Con un pequeño ajuste funciona en el escritorio, para el desbordamiento de los dispositivos móviles se establece en oculto

código final

body.modal-open { padding-left: 16px!important; overflow-y: auto; }

¡Espero que esto ayude!

Answer 2

Cuando se abre el modelo, un relleno de 17 píxeles a la derecha del cuerpo. El siguiente código debería resolver ese problema.

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

Answer 3

En realidad, es causada por la siguiente regla en bootstrap.css:

body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
  margin-right: 15px;
}

No estoy exactamente seguro de por qué se comporta así (tal vez para explicar la barra de desplazamiento de alguna manera) pero puede cambiar el comportamiento con esto:

body.modal-open {margin-right: 0px}

EDITAR: En realidad, este es un problema informado en bootstrap: https://github.com/twbs/bootstrap/issues/9855

Answer 4

Encontré esta respuesta en problemas de TB

simplemente agregando esto debajo de css ese pequeño movimiento será arreglado

body, .navbar-fixed-top, .navbar-fixed-bottom {
  margin-right: 0 !important;
}

Créditos a https://github.com/tvararu

Answer 5

Encontré la respuesta de Agni Pradharma trabajando para mí; sin embargo, no completamente en Chrome.

Parece que la barra de desplazamiento del documento es más ancha que la barra de desplazamiento de otros elementos; así que edité la función getScrollBarWidth.

Simplemente primero verifica el ancho; elimina la barra de desplazamiento del documento; luego compara la diferencia. También sucede que es mucho menos código.

$(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 fwidth = $(document).width();
    $(''html'').css(''overflow-y'', ''hidden'');
    var swidth = $(document).width();
    $("html").css("overflow-y", "visible");
    return (swidth - fwidth);
};

Answer 6

Entonces resultó que estaba obteniendo un margen derecho de 250px más o menos. Mi problema parecía ser que .modal-open se estaba poniendo en posición: fijo, y esa era la causa por cualquier razón. Entonces, en mi caso, la solución fue similar, pero establecí el valor de la posición en el valor predeterminado de la siguiente manera:

.modal-open{ position: initial !important;}

Answer 7

Esta es la solución propuesta por el usuario que realmente me lo v3.1.1 durante el uso de Bootstrap v3.1.1 y Google Chrome 35.0.1916.114m . La solución proviene de un https://github.com/twbs/bootstrap/issues/9855 GitHub con respecto a este asunto:

.modal
{
    overflow-y: auto;
}

.modal-open
{
   overflow:auto;
   overflow-x:hidden;
}

La corrección aterrizará solo en Bootstrap 3.2 como desbribado por mdo .

Answer 8

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 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 9

Esto es lo que usé, funcionará al 100% en Bootstrap 3.2.0, siempre y cuando no te importe forzar barras de desplazamiento.

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: scroll;
}

Answer 10

Esto funcionó para mí. Anula el relleno de 17 píxeles añadido a la derecha del cuerpo:

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

Answer 11

Intenta cambiar todas las ocurrencias de abajo

$body.css(''padding-right'',XXX)

con

$body.css(''padding-right''0)

en su archivo bootstrap.js

Eso es todo..

Answer 12

Mucho ha cambiado desde bootstrap 3.3.6 por lo que las soluciones anteriores pueden no ser suficientes.

Para resolver esto, mire la función setScrollbar en bootstrap.js (o bootstrap-min.js, por supuesto), inmediatamente notará que bootstrap está agregando relleno-derecho al elemento body estableciendo su valor en un valor resuelto de scrollbarWidth plus relleno existente: derecho en el cuerpo (o 0 si no).

Si comenta el siguiente

//this.$body.css(''padding-right'', bodyPad + this.scrollbarWidth)

En su css anula la clase modal-abierta de arranque con la siguiente

.modal-open{
  overflow:inherit;
 }

La gente ha sugerido overflow-y: scroll; el problema con esto es que su contenido cambia si la barra de desplazamiento no existe en primer lugar.

NB Según http://getbootstrap.com/javascript/#modals , siempre intente colocar un código HTML modal en una posición de nivel superior en su documento

Answer 13

Ninguna solución aquí solucionó mi problema. Pero seguir Css que obtuve de Github funcionó para mí.

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

Answer 14

Para bootstrap 3.xx

Encontré una solución que funciona con 100% CSS y sin JavaScript .

El truco es, mostrar la barra de desplazamiento para modal sobre la barra de desplazamiento del contenido html.

CSS:

html {
  overflow: hidden;
  height: 100%;
}
body {
  overflow: auto;
  height: 100%;
}

/* unset bs3 setting */
.modal-open {
 overflow: auto; 
}

aquí hay un ejemplo en línea: http://jsbin.com/oHiPIJi/43/

Lo pruebo en Windows 7 con:

• FireFox 27.0
• Chrome 32.0.1700.107 m
• IE 11 en el modo de navegador 8, 9, 10, Edge (escritorio)
• IE 11 en el modo de navegador 8, 9, 10, Edge (teléfono de Windows)

Un pequeño problema nuevo que pude encontrar con IE:

IE tiene fondo (= cuerpo) desplazándose con la rueda del mouse, si no hay nada más para desplazarse en primer plano.

Cuidado con la position:fixed ¡ position:fixed !

Debido a la naturaleza de esta solución, necesita cuidado adicional para los elementos fijos. Por ejemplo, el relleno de "barra de navegación fija" debe establecerse en html y no en el body (cómo se describe en el documento de arranque ).

/* only for fixed navbar: 
* extra padding stetting not on "body" (like it is described in doc), 
* but on "html" element
* the used value depends on the height of your navbar
*/
html {
  padding-top: 50px;
  padding-bottom: 50px;
}

alternativa con envoltura

Si no le gusta overflow:hidden conjunto overflow:hidden en html (algunas personas no quieren esto, pero funciona, es válido y 100% compatible), puede envolver el contenido del body en un div adicional.

De lo que no necesita cuidado adicional para los elementos fijos, puede usarlo como antes.

body, html {
  height: 100%;
}
.bodywrapper {
  overflow: auto;
  height: 100%;
}

/* unset bs3 setting */
.modal-open {
 overflow: auto; 
}

/* extra stetting for fixed navbar, see bs3 doc
*/
body {
  padding-top: 50px;
  padding-bottom: 50px;
}

aquí hay un ejemplo: http://jsbin.com/oHiPIJi/47/

Actualizar:

Problemas en Bootstrap:

• #12627
• #9855

Actualización 2: FYI

En Bootstrap 3.2.0 agregan una solución a modal.js que intenta manejar los problemas con Javascript para cada invocación de modal.prototype.show() , Modal.prototype.hide() y Modal.prototype.resize() . Agregan 7 (!) Nuevos métodos para eso. Ahora ca. El 20% del código de modal.js solo intenta manejar esos problemas.

Answer 15

Para cualquiera que todavía tenga problemas con esto, la última versión de Bootstrap tiene una solución nativa. Simplemente actualice los archivos bootstrap.min.css y bootstrap.min.js de la última versión.

http://getbootstrap.com/

Answer 16

Para evitar que la página se desplace en instancias similares, por ejemplo, una apertura de acordeón que pasa por la parte inferior de la página, la agrego en CSS:

body {
    overflow-y: scroll;
    height: 100%;
}

El overflow-y: scroll obliga a la barra de desplazamiento a estar presente en todo momento. Para ser sincero, no puedo recordar por qué pongo la height:100% allí ... pero parece que no lo necesitas para este problema.

Demostración: http://jsfiddle.net/jxX6A/8/

Todavía hay un pequeño movimiento. Pero eso parece estar presente en la propia página de ejemplo de Bootstrap: http://getbootstrap.com/javascript/#modals

Así que supongo que estás atascado ... pero aún es mucho mejor de lo que estabas viendo inicialmente.

EDITAR: podría estar preocupado de que agregar estos estilos interfiera con otras cosas de Bootstrap, ya que no las he usado yo mismo, así que es posible que quieras verificarlas.

Answer 17

Para mí funciona bien así

 .modal-open .modal {
  overflow-x: scroll;
  overflow-y: scroll;
}

Answer 18

Para mí, lo siguiente parece funcionar: probado en Firefox y Chrome en Linux:

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

Answer 19

Prueba esto:

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

.modal::-webkit-scrollbar {
    width: 0 !important; /*removes the scrollbar but still scrollable*/
    /* reference: http://.com/a/26500272/2259400 */
}

Answer 20

Realmente no me gustó ninguna de las soluciones provistas, y usé una combinación de ellas (junto con una solución que tenía previamente para los estilost qTip) para encontrar algo que funcionara mejor para mí con Bootstrap v3.3.7.

ACTUALIZACIÓN: Problema resuelto con el posicionamiento fijo de la barra de navegación en iOS.

CSS:

/* fix issue with scrollbars and navbar fixed movement issue with bootstrap modals */
html {
    overflow-y: scroll !important;
}

html.noscroll {
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
}

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

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

.modal::-webkit-scrollbar {
    width: 0 !important; /*removes the scrollbar but still scrollable*/
}
/* end modal fix */

JavaScript:

/* fix for modal overlay scrollbar issue */
$(document).ready(function() {
    var curScrollTop;
    var prevScrollTop;
    $(''.modal'').on(''show.bs.modal'', function() {
        curScrollTop = $(window).scrollTop();
        $(''html'').addClass(''noscroll'').css(''top'', ''-'' + curScrollTop + ''px'');
        $(''.navbar-fixed-top'').css({''position'':''absolute'',''top'':curScrollTop});     
        $(window).on("resize", function() {             
            var bodyH = $("body").height();
            var winH = $(window).height();
            if (winH > bodyH) {
                prevScrollTop = curScrollTop;
                curScrollTop = 0;
                $(''.navbar-fixed-top'').css({''position'':''absolute'',''top'':''0''}); 
            }
            else {
                $(''html'').removeClass("noscroll");
                if (curScrollTop == 0) window.scrollTo(0, prevScrollTop);
                else window.scrollTo(0, curScrollTop);
                curScrollTop = $(window).scrollTop(); 
                $(''.navbar-fixed-top'').css({''position'':''absolute'',''top'':curScrollTop});  
                $(''html'').addClass("noscroll");
            }
            $(''html'').css(''top'', ''-'' + curScrollTop + ''px'');
        })
    })
    $(''.modal'').on(''hide.bs.modal'', function() {
        $(''html'').removeClass("noscroll");
         $(''.navbar-fixed-top'').css({''position'':''fixed'',''top'':''0''});
        window.scrollTo(0, curScrollTop);
        $(window).off("resize");
    })
})

Esto permite que el fondo sea "fijo" y aún permite que los modales sean desplazables, resuelve el problema de la barra de desplazamiento doble y el reposicionamiento de la barra de navegación fija.

Tenga en cuenta que también hay un código adicional para recordar la posición ''scroll'' (y volver a ella) cuando se cierra el modal.

Espero que esto ayude a cualquier otra persona que busque alcanzar lo que estaba buscando.

Answer 21

Si todas las soluciones anteriores no funcionó, puede ser debido a la colocación del contenido, solo eche un vistazo a la posición del

body.modal-open
{
   padding-right: 0 !important; // not important
   position: relative;
}

Answer 22

Simplemente agrega una clase

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

funcionó para mí

Answer 23

Simplemente haz esto simplemente y eso es todo

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

Funciona para mi. Corto y hace el trabajo.

Answer 24

Solucioné mi problema y creo que funcionará para todos. En bootstrap.js hay una línea:

if (this.bodyIsOverflowing) this.$body.css(''padding-right'', bodyPad + this.scrollbarWidth)

Esto significa que, en algunos casos, Bootstrap agregará un ancho de barra de desplazamiento a la derecha al abrir un modal. Así que @pmanOnu estaba a mitad de camino, pero no elimine toda esta línea de código, sino solo

reemplace bodyPad + this.scrollbarWidth en bootstrap.js con 0

para hacer que Bootstrap agregue un relleno a la derecha de 0px (que es lo mismo que no agregar).

A continuación, agregue .modal-open {overflow: initial;} a su CSS personalizado para evitar que Bootstrap deshabilite la barra de desplazamiento mientras abre modales.

Answer 25

Tengo el mismo problema y obtuve una solución que funciona para mí ...

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

coloque este código en la parte superior de su archivo style.css

Answer 26

Usted acaba de editar la clase .modal-open del archivo bootstrap.min.css, .modal-open{overflow:auto} estará bien .modal-open{overflow:auto}

El sobreflujo: oculto está establecido allí, usted acaba de configurar el exceso de flujo: automático.

Answer 27

Utilizo Bootstrap v3.3.4 y veo este problema, entendí que el modal de Bootstrap agrega un relleno de 17 píxeles directamente al cuerpo, así que simplemente use el siguiente código:

body {
    padding-right: 0 !important;
}

Answer 28

la mejor manera es: agregar a BODY overflow-y: scroll

y eliminar la función 4 de bootstrap.js -

 checkScrollbar
 setScrollbar
 resetScrollbar
 measureScrollbar

Answer 29

me he enfrentado el mismo problema y la siguiente solución

.modal-open {
    overflow: visible;
}

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

Answer 30

me he enfrentado el mismo problema y la siguiente solución funciona para mí

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