Centrage vertical de la fenêtre modale Bootstrap

Question

Je voudrais centrer ma modale sur la fenêtre d'affichage (au milieu). J'ai essayé d'ajouter quelques propriétés css.

 .modal { position: fixed; top:50%; left:50%; }   

J'utilise cet exemple http://jsfiddle.net/rniemeyer/Wjjnd/

J'ai essayé

$("#MyModal").modal('show').css(
    {
        'margin-top': function () {
            return -($(this).height() / 2);
        },
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    })

Answer 1

Cela fait l'affaire : http://jsfiddle.net/sRmLV/1140/

Il utilise un helper-div et quelques css personnalisés. Aucun javascript ou jQuery n'est nécessaire.

HTML (basée sur la méthode Bootstrap code de démonstration )

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                    </button>
                     <h4 class="modal-title" id="myModalLabel">Modal title</h4>

                </div>
                <div class="modal-body">...</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

Answer 2

Comme la réponse de gpcola ne fonctionnait pas pour moi, j'ai modifié un peu la réponse pour qu'elle fonctionne maintenant. J'ai utilisé "margin-top" au lieu de transform. De plus, j'utilise l'événement "show" au lieu de "shown" parce qu'après cela, j'avais un très mauvais saut de positionnement (visible lorsque vous avez des animations bootstrap). Assurez-vous de définir l'affichage à "block" avant le positionnement, sinon $dialog.height() sera 0 et la modale ne sera pas centrée complètement.

(function ($) {
    "use strict";
    function centerModal() {
        $(this).css('display', 'block');
        var $dialog  = $(this).find(".modal-dialog"),
        offset       = ($(window).height() - $dialog.height()) / 2,
        bottomMargin = parseInt($dialog.css('marginBottom'), 10);

        // Make sure you don't hide the top part of the modal w/ a negative margin if it's longer than the screen height, and keep the margin equal to the bottom margin of the modal
        if(offset < bottomMargin) offset = bottomMargin;
        $dialog.css("margin-top", offset);
    }

    $(document).on('show.bs.modal', '.modal', centerModal);
    $(window).on("resize", function () {
        $('.modal:visible').each(centerModal);
    });
}(jQuery));

Answer 3

C'est ce que j'ai fait pour mon application. Si vous regardez les classes suivantes dans le fichier bootstrap.css .modal-dialog a un padding par défaut de 10px et @media screen et (min-width : 768px) .modal-dialog a un padding supérieur fixé à 30px. Dans mon fichier css personnalisé, j'ai donc défini un remplissage supérieur de 15 % pour tous les écrans sans spécifier de largeur d'écran. J'espère que cela vous aidera.

.modal-dialog {
  padding-top: 15%;
}

Answer 4

Le meilleur moyen que j'ai trouvé pour tous les navigateurs HTML5 :

body.modal-open .modal {
    display: flex !important;
    height: 100%;
} 

body.modal-open .modal .modal-dialog {
    margin: auto;
}

Answer 5

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="table">
        <div class="table-cell">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

// Styles

.table {
 display: table;
 height:100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}