Centrer verticalement les modales Bootstrap

Pour ceux qui arrivent, j’ai récemment (il y a 5 mois maintenant) rejoins l’équipe de Ouiche Lorraine en tant qu’intégrateur. J’ai été principalement recruté non pas pour ma joie de vivre mais pour travailler sur un nouveau projet qui devrait sortir d’ici peu.

Et étant le seul intégrateur, je peux me livrer à deux trois expérimentations sur ce projet. Lorsqu’il sortira, j’en ferai probablement un article plus complet sur comment j’ai géré l’intégration dessus. En attendant, ce que je peux dire c’est que Bootstrap était déjà en place et qu’il aura vocation à dégager dans une potentielle V2.

Bref, arrivons à notre sujet : centrer cette modale !

Ne pas sortir de sa zone de confort

Lorsque mon DA m’a demandé de centrer verticalement les modales, je me suis mis en quête de l’aligneur vertical parfait. J’avais le hack du `transform: translateX(-50%);` en tête, dont acte.

À savoir que par défaut, elles sont centrées horizontalement et à 30 pixels du haut.

À savoir également que je ne prefix rien : Autoprefixer s’en occupe pour moi.

Bref, c’est porti :

1
2
3
4
5
6
7
8
9
10
11
12
13
.modal-dialog {
    margin-top:  !important;
    margin-bottom:  !important;
}
 
.modal.in .modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    opacity: 1;
    transform: translateY(-50%);
}

Et voilà, ni plus ni moins.

Sortir de sa zone de confort

Bro do you even flex

BAH VOILÀ C’EST ÇA QU’ON VEUT ! Allez, c’est reparti :

1
2
3
4
5
6
7
8
9
10
11
12
13
.modal-dialog {
    display: flex;
    width: auto !important;
    height: 100%;
}
 
.modal-content {
    margin: auto;
}
 
.lt_ie10 .modal-dialog {
  margin-top: 30px;
}

Et voilà ! rien de plus. C’est merveilleux. Flexbox est fantastique.

Concernant IE, bon, un simple margin-top fera l’affaire, t’facons, ils méritent pas mieux.

J’ai également utilisé flexbox pour centrer verticalement et horizontalement deux blocks (au lieu d’y aller avec les colonnes Bootstrap + le centrage vertical avec line-height), c’était merveilleux.

Mini animation

Et allez, pourquoi pas, à l’ouverture, une mini-animation ?

1
2
3
4
5
6
7
8
9
10
.modal .modal-dialog {
    opacity: ;
    transition: opacity .3s ease,transform .3s ease;
    transform: translateY(-30px);
}
 
.modal.in .modal-dialog {
    opacity: 1;
    transform: translateY();
}

Les liens qui vont bien

Et voilà !

Un grand merci au collègue @tentacode pour cette merveilleuse image qui illustre l’article. Également, sincères pensées aux devs (et au DA !) qui n’arrivent (et n’arriveront) pas à passer un seul jour sans qu’ils entendent parler de Flexbox.