jquery - tamaño - ventana modal bootstrap

Bootstrap 3: configure la altura de la ventana modal de acuerdo con el tamaño de la pantalla

Question

Intento crear un tipo de megamenú receptivo usando el diálogo modal de Bootstrap 3. Me gustaría establecer el ancho y alto de toda la ventana modal al 80% de la ventana gráfica, mientras establezco el cuerpo modal a una altura máxima para no poblar toda la pantalla en grandes ventanas.

Mi HTML:

    <div class="modal fade">
            <div class="modal-dialog modal-megamenu">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                        <h4 class="modal-title">Modal Mega Menu Test</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                        </div>
                    </div>
                </div>
                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal" class="btn btn-primary">close</button>
                    </div>
             </div>
        </div>

Mi CSS:

.modal-megamenu {
    width:80%;
    height:80%;
}

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

Esto funciona según lo previsto para el ancho, pero el parámetro "altura" no da ningún resultado. Así, la altura de la ventana modal siempre se establece en el valor de altura máxima. ¿Alguien tiene una idea de cómo establecer la altura de forma dinámica de acuerdo con la altura de la ventana gráfica?

Answer 1

Para ampliar la respuesta de Ryand, si estás usando Bootstrap.ui, esto en tu instancia modal hará el truco:

    modalInstance.rendered.then(function (result) {
        $(''.modal .modal-body'').css(''overflow-y'', ''auto''); 
        $(''.modal .modal-body'').css(''max-height'', $(window).height() * 0.7);
        $(''.modal .modal-body'').css(''height'', $(window).height() * 0.7);
    });

Answer 2

Similar a Bass, también tuve que configurar el overflow-y. Eso realmente podría hacerse en el CSS

$(''#myModal'').on(''show.bs.modal'', function () {
    $(''.modal .modal-body'').css(''overflow-y'', ''auto''); 
    $(''.modal .modal-body'').css(''max-height'', $(window).height() * 0.7);
});

Answer 3

Solución de CSS puro, utilizando calc

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

200px se puede ajustar de acuerdo con la altura del encabezado y el pie de página

Answer 4

Supongo que quiere hacer un uso modal de la mayor cantidad de espacio de pantalla posible en los teléfonos. He creado un complemento para solucionar este problema de UX de los modos modales de Bootstrap en teléfonos móviles, puedes consultarlo aquí: https://github.com/keaukraine/bootstrap-fs-modal

Todo lo que tendrá que hacer es aplicar modal-fullscreen clase modal-fullscreen y actuará de forma similar a las pantallas nativas de iOS / Android.

Answer 5

Tratar:

$(''#myModal'').on(''show.bs.modal'', function () {
$(''.modal-content'').css(''height'',$( window ).height()*0.8);
});