- 0000 / Homepage
- 0005 / Homepage Pro
- 1100 / Univers 1
- 1200 / Univers 2
- 2100 / Cuisine Liste
- 2200 / Cuisine Modèle
- 3010 / Ensemble Meubles
- 4100 / Liste Produits
- 4201 / Produit
- 4202 / Produit Sur Mesure
- 4203 / Produit Personnalisable
- 4204 / Produit Colisé
- 4900 / Inscription light
- 5000 / Bonnes affaires
- 5200 / Opération
- 6100 / Panier
- 6101 / Panier vide
- 6200 / Connexion
- 6201 / Password
- 6206 / Inscription
- 6207 / Inscription Pro
- 6300 / Livraison
- 6301 / Livraison No Adress
- 6302 / Livraison Pb Retrait
- 6303 / Livraison Pb Livraison
- 6400 / Paiement
- 6500 / Confirmation / Retrait
- 6501 / Confirmation / Livraison
- 7100 / Projet
- 7200 / MaPrimeRenov
- 7300 / MaPrimeAdapt
- 8000 / Marque
- 9000 / Services
- 9100 / Pose
- 9200 / Conseil domicile
- 9210 / Rendez-vous Magasin
- 9210 / Rendez-vous Domicile
- 9300 / Atelier
- 9400 / Livraison domicile
- 9500 / SAV
- 9600 / Drive
- 9700 / Financement
- AAAA / Layout
- BBBB / Layout Connected
Nécessite le plugin javascript bootstrap correspondant.
La modal prévoit de façon facultative .modal-header, .modal-body et .modal-footer.
Par défaut, le clic sur l'overlay fermet la fermeture de la modal.
L'attribut data-dismiss="modal" est à mettre sur tout élément servant de bouton de fermeture.
Overlay non cliquable
En ajoutant data-backdrop="static" sur la modal.
Long content
Screen scrollable
Body scrollable
A noter l'ajout de la class .modal-dialog-scrollable sur la .modal-dialog.
Centrage vertical
Ajouter la classe .modal-dialog-centered à .modal-dialog.
Size
Les classes suivantes sont à metrte sur .modal-dialog.
| Size | Class | Modal max-width |
|---|---|---|
| Small | .modal-sm |
300px |
| Default | None | 640px |
| Large | .modal-lg |
1083px |
| Extra large | .modal-xl |
1296px |
Focus
Méthode pour déplacer le focus lors de l'ouverture d'une modal.
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
En savoir plus sur les possibilités d'utiliser des grids, des tooltip, des popovers, des passages de variables... et l'implémentation javascript