css - centered - Posición de cabecera fija en bootstrap 3 modal

modal-dialog-centered bootstrap 3

Question

Quiero usar un encabezado fijo en mi Bootstrap modal, sin embargo, si configuro .modal-header como posición: arreglado se desplaza junto con el contenido de moda. ¿Cómo creo un encabezado realmente fijo en BS modal?

Answer 1

Aquí hay un truco simple. Déjame asumir que tengo que arreglar el div con la clase "fixedHeader"

Manera simple de Jquery:

$(''.modal'').scroll(function() {
     var a=$(''.modal'').scrollTop();
     $(''.fixedHeader'').css(''top'',a+''px'');
});

CSS

.fixedHeader {
    position:fixed;
}

Todo lo que he respondido anteriormente es para bootstrap normal usando jquery. Pero si alguien está usando bootstrap angular para el modal entonces

Angular

$timeout(function() {
    angular.element(''.modal'').scroll(function() {
        var a = angular.element(''.modal'').scrollTop();
        angular.element(''.fixedHeader'').css(''top'', a + ''px'');
    });
}, 10);
/*Put the above in modalinstance controller*/
/*timeout is necessary as you want to run the function after the modal is loaded or sometimes it may be unable to find the class ''.modal'' */

CSS

.fixedHeader {
    position:fixed;
}

Asegúrese de tener instalada la dependencia de jquery en ambos casos.

Answer 2

Contenido corporal

CSS:

body{
    overflow:hidden;
}

Answer 3

De acuerdo con mi comentario, esto fue en realidad una mejora en Bootstrap 3. Permitir contenido extenso y tener todo el desplazamiento modal, no solo el "contenido" del modal.

Puedes anularlo con algo como esto, pero no es tan buena funcionalidad.

.modal {
  overflow: hidden;
}

.modal-body {
  height: 300px;
  overflow: auto;
}

Demo

Answer 4

En javascript agregar una clase a modal:

windowClass: ''framework-modal''

En css ajustar o modal-body:

.framework-modal .modal-body {
    max-height: 600px;
    overflow: auto;
}

Answer 5

En lugar de intentar hacer que el encabezado sea fijo, simplemente fije la altura del cuerpo y hágalo desplazable. De esa manera, el encabezado (y el pie de página) siempre estarán visibles.

Puedes hacerlo fácilmente usando la unidad CSS3 vh junto con calc . Tanto vh como calc tienen un soporte de navegador bastante bueno (IE9 +).

La unidad vh es relativa a la altura de la ventana gráfica (= ventana del navegador). 1 vh es el 1% de la altura y 100vh significa el 100% de la altura de la ventana 100vh .

Solo necesitamos restar la altura del encabezado, pie de página y márgenes del modal. Va a ser difícil que la dinámica. Si esos tamaños son fijos, solo sumamos todas las alturas.

Establezca la height o la height max-height en calc(100vh - header+footer px) .

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

Ver el jsfiddle

Answer 6

Mi solución puede parecer un poco tonta, pero detalla los pasos que tomé para resolver este problema para mi caso de uso.

Intenté algo así como la answer de ritz078, pero lo que encontré fue que no funcionaba bien en iOS al desplazarme, ya que a Safari le gusta hacer las cosas a su manera.

Entonces, mi solución fue duplicar el bit del código que quería colocar y colocar ese código duplicado fuera del modal en su propio contenedor oculto:

<div class="fixed-header">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
    </div>
</div>

Luego utilicé JS para 1) hacer visible el código duplicado después de desplazarme un poco por el modal, 2) cerrar el código duplicado cada vez que hago clic fuera del modal, y 3) restaurar la función en el botón de cierre del modal duplicado:

$(''#myModal'').on(''scroll'', function() {
    var threshold = 60;

    if ($(''#myModal'').scrollTop() > threshold) {
        $(''.fixed-header'').addClass(''affixed'');
    }
    else {
        $(''.fixed-header'').removeClass(''affixed'');
    }
});

$(''#myModal'').on(''hide.bs.modal'', function (e) {
    $(''.fixed-header'').removeClass(''affixed'');
});

$(''.fixed-header button'').click(function() {
    $(''#myModal'').modal(''hide'');
});

El desafío aquí es hacer coincidir el estilo modal (particularmente su ancho y márgenes), pero esta solución le permite desplazarse libremente en el modal en iOS sin verse mal, que era mi objetivo.

JSFiddle (derivado de la respuesta de Jasny para mostrar en qué se diferencia de su respuesta)