it-swarm.com.de

Bootstrap 3 - Höhe des modalen Fensters entsprechend der Bildschirmgröße einstellen

Ich versuche, eine Art responsives Megamenu mit dem modifizierten Dialog von Bootstrap 3 zu erstellen. Ich möchte die Breite und Höhe des gesamten modalen Fensters auf 80% des Ansichtsfensters festlegen, während der Modal-Body auf eine maximale Höhe eingestellt wird, um den gesamten Bildschirm nicht bei großen Ansichtsfenstern aufzufüllen. 

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

Mein CSS:

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

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

Dies funktioniert wie vorgesehen für die Breite, aber der Parameter "height" liefert kein Ergebnis. Auf diese Weise wird die Höhe des Modalfensters immer auf den Wert für die maximale Höhe festgelegt. Hat jemand eine Idee, wie die Höhe dynamisch an die Höhe des Viewports angepasst werden soll?

47
Ralf Glaser

Reine CSS-Lösung mit calc

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

200px kann entsprechend der Kopf- und Fußhöhe eingestellt werden

65
Dan Key

Ähnlich wie bei Bass musste ich auch den Überlauf-y einstellen. Das könnte man eigentlich im CSS machen

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

Versuchen:

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

Wenn Sie die Antwort von Ryand erweitern möchten, wenn Sie Bootstrap.ui verwenden, führt dies auf Ihrer Modal-Instanz den Trick aus:

    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);
    });
5
Tiago

Ich gehe davon aus, dass Sie die modale Nutzung von Telefonen auf dem Telefon so gut wie möglich gestalten möchten. Ich habe ein Plugin erstellt, um dieses UX-Problem der Bootstrap-Modals auf Mobiltelefonen zu beheben. Sie können es hier ausprobieren - https://github.com/keaukraine/bootstrap-fs-modal

Alles, was Sie tun müssen, ist, die modal-fullscreen-Klasse anzuwenden, und sie verhält sich ähnlich wie die Bildschirme von iOS/Android.

0
keaukraine