web-dev-qa-db-fra.com

Bootstrap 3 - définit la hauteur de la fenêtre modale en fonction de la taille de l'écran

J'essaie de créer un type de megamenu réactif à l'aide du dialogue modal Bootstrap 3. Je souhaite définir la largeur et la hauteur de la fenêtre modale entière à 80% de la fenêtre d'affichage, tout en définissant le corps modal à une hauteur maximale afin de ne pas remplir l'écran entier dans de grandes fenêtres. 

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

Mon CSS:

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

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

Cela fonctionne comme prévu pour la largeur, mais le paramètre "height" ne donne aucun résultat. Comme cela, la hauteur de la fenêtre modale est toujours définie sur la valeur max-height. Quelqu'un a-t-il une idée de la manière de régler la hauteur de manière dynamique en fonction de la hauteur de la fenêtre?

jquerycsstwitter-bootstrap
47
Ralf Glaser

Solution CSS pure utilisant calc 

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

200px peut être ajusté en fonction de la hauteur de l'en-tête et du pied de page

65
Dan Key

Semblable à Bass, je devais aussi régler le débordement-y. Cela pourrait effectivement être fait dans le CSS

$('#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

Essayer:

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

Pour développer la réponse de Ryand, si vous utilisez Bootstrap.ui, ceci sur votre instance modale fera l'affaire:

    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

Je suppose que vous voulez utiliser modal autant d’écran que possible sur les téléphones. J'ai créé un plugin pour résoudre ce problème UX des modaux Bootstrap sur les téléphones mobiles, vous pouvez le vérifier ici - https://github.com/keaukraine/bootstrap-fs-modal

Tout ce que vous avez à faire est d’appliquer la classe modal-fullscreen et elle agira de la même manière que les écrans natifs d’iOS/Android.

0
keaukraine