css - eventos - modal bootstrap ejemplos
¿Cómo puedo evitar la barra de desplazamiento del cuerpo y el desplazamiento cuando se carga el cuadro de diálogo modal de arranque de Twitter? (11)
Cuando abro el cuadro de diálogo modal de arranque de Twitter, el fondo provoca una barra de desplazamiento y cambia el contenido.
Para evitar la barra de desplazamiento, uso este CSS:
.modal {
overflow: hidden;
}
Pero no puedo evitar el cambio.
saludos, Marko
Estoy usando Bootstrap Version 3
Agregué esto a mi CSS y pareció funcionar al agregar una superposición ''fija'' para ver
.modal-open {
margin-right: 15px;
}
Deberías probar esto. esto está funcionando bien
$j(document).ready(function() {
$(''.modal'').on(''show.bs.modal'', function () {
if ($(document).height() <= $(window).height()) {
$(''body'').css(''margin-right'',''0'',''!important'');
}
else {
$(''body'').removeAttr(''style'');
}
})
$(''.modal'').on(''hide.bs.modal'', function () {
$(''body'').removeAttr(''style'');
})
})
El mío es fácil allí (solo CSS):
body {
padding-right:0px !important;
margin-right:0px !important;
}
El hecho es que lo importante es el bootstrap superpuesto desde el cambio de margen y margen con la clase y estilos modales abiertos.
La siguiente inclusión en mi archivo .css solucionó que mi página de contenido centrado se moviera o cambiara de tamaño cuando se mostraba el menú emergente.
No necesitaba Javascript, solo el código CSS a continuación. Esto lo arregló para el contenido con o sin una barra de desplazamiento vertical u horizontal.
.modal
{
overflow-y: auto !important;
}
.modal-open {
overflow: auto !important;
overflow-x: hidden !important;
padding-right: 15px !important;
}
Estoy usando bootstrap 3.3.7.
Marko,
Acabo de tener el mismo problema. Parece que Bootstrap 3.0.0 agrega una clase a <body> , modal-open , cuando se muestra el modal por primera vez. Esta clase agrega margin-right: 15px al cuerpo para dar cuenta de una barra de desplazamiento, que está allí en páginas más largas. Esto es genial, excepto en las páginas más cortas cuando una barra de desplazamiento no está en el cuerpo. En el caso sin barra de desplazamiento, el margen derecho hace que el cuerpo cambie a la izquierda en modal abierto.
Pude resolver esto agregando un poco de Javascript y un poco de CSS:
CSS:
/* override bootstrap 3 class to remove scrollbar from modal backdrop
when not necessary */
.modal {
overflow-y: auto;
}
/* custom class to override .modal-open */
.modal-noscrollbar {
margin-right: 0 !important;
}
JS:
(function($) {
$(document)
.on( ''hidden.bs.modal'', ''.modal'', function() {
$(document.body).removeClass( ''modal-noscrollbar'' );
})
.on( ''show.bs.modal'', ''.modal'', function() {
// Bootstrap adds margin-right: 15px to the body to account for a
// scrollbar, but this causes a "shift" when the document isn''t tall
// enough to need a scrollbar; therefore, we disable the margin-right
// when it isn''t needed.
if ( $(window).height() >= $(document).height() ) {
$(document.body).addClass( ''modal-noscrollbar'' );
}
});
})(window.jQuery);
Estos combinados permiten que la corrección de la barra de desplazamiento de margen derecho funcione para páginas largas, pero está desactivada para páginas más cortas (cuando la altura del documento es <= altura de la ventana). ¡Espero que esto ayude!
Bootstrap 3.0.1 + (probado hasta 3.1.1) es una historia diferente. Pruebe lo siguiente:
CSS:
/* override bootstrap 3 class to remove scrollbar from modal backdrop
when not necessary */
.modal {
overflow-y: auto;
}
/* custom class to add space for scrollbar */
.modal-scrollbar {
margin-right: 15px;
}
JS:
(function($) {
$(document)
.on( ''hidden.bs.modal'', ''.modal'', function() {
$(document.body).removeClass( ''modal-scrollbar'' );
})
.on( ''show.bs.modal'', ''.modal'', function() {
// Bootstrap''s .modal-open class hides any scrollbar on the body,
// so if there IS a scrollbar on the body at modal open time, then
// add a right margin to take its place.
if ( $(window).height() < $(document).height() ) {
$(document.body).addClass( ''modal-scrollbar'' );
}
});
})(window.jQuery);
EDITAR :
A la luz de que Mac elimina las barras de desplazamiento para que no ocupen el ancho de la ventana, aquí hay una solución más portátil (3.0.1+) si no le molesta la detección de algunas funciones. Referencia: http://davidwalsh.name/detect-scrollbar-width
CSS:
.scrollbar-measure {
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}
JS:
window.jQuery(function() {
// detect browser scroll bar width
var scrollDiv = $(''<div class="scrollbar-measure"></div>'')
.appendTo(document.body)[0],
scrollBarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
$(document)
.on(''hidden.bs.modal'', ''.modal'', function(evt) {
// use margin-right 0 for IE8
$(document.body).css(''margin-right'', '''');
})
.on(''show.bs.modal'', ''.modal'', function() {
// When modal is shown, scrollbar on body disappears. In order not
// to experience a "shifting" effect, replace the scrollbar width
// with a right-margin on the body.
if ($(window).height() < $(document).height()) {
$(document.body).css(''margin-right'', scrollBarWidth + ''px'');
}
});
});
Para mí, solo la combinación de dos respuestas funcionó.
css:
body {
padding-right:0px !important;
margin-right:0px !important;
}
body.modal-open {
overflow: auto;
}
aguja:
body
padding-right:0px !important
margin-right:0px !important
&.modal-open
overflow: auto
Prueba este simple javascript:
$j(document).ready(function() {
if ($(document).height() <= $(window).height()) {
$(''body'').css(''margin-right'',''0'',''!important'');
}
});
Prueba esto
body.modal-open {
overflow: auto;
}
Tuve el mismo problema con la barra de desplazamiento desapareciendo, y el cuerpo cambiando a la izquierda al abrir un modo de arranque.
Descubrí una solución fácil:
.modal
{
overflow-y: auto !important;
}
.modal-open
{
overflow:auto !important;
overflow-x:hidden !important;
padding-right: 0 !important;
}
¡Buena suerte a todos!
la mejor manera es:
- para agregar a BODY overflow-y: scroll
- y elimine 4 funciones de bootstrap.js:
checkScrollbar,setScrollbar,resetScrollbarymeasureScrollbar.
body {
/*prevent modal background jumping*/
padding-right:0px !important;
margin-right:0px !important;
}
/*prevent modal background jumping*/
body.modal-open {
overflow: auto;
}