Modal

Une modale met en avant un contenu nécessitant une interaction de l'utilisateur avant qu'il ne puisse continuer son parcours. Elle apparait au clic sur un élément déclencheur (généralement un lien ou un bouton). L'événement déclencheur est du ressort du développeur ; Trilogy Vanilla apporte néanmoins une solution si besoin, grâce aux data-attributs HTML5.

Modal classique

La modale classique s'affichera au centre de la page avec un overlay en arrière-plan.

Aperçu

Mode responsive

                                                                <div data-modal-context="">
                                        <button aria-label="show modal" class="button is-primary" data-modal-open="">Afficher la modale</button>
                                        <div class="modal" data-modal="">
                                            <div class="modal-content">
                                                <button aria-label="close modal" class="modal-close is-large" data-modal-close=""></button>
                                                <div class="modal-title">Titre</div>
                                                <p>Labore ea esse ea minim sit magna amet duis eiusmod est dolore. In irure aliquip anim reprehenderit sint eiusmod quis eiusmod eiusmod commodo aliquip non est do. Aliquip irure officia adipisicing culpa eiusmod do proident exercitation aliquip consequat. Deserunt occaecat aliqua magna esse cupidatat. Commodo tempor laboris mollit aute est ullamco aliqua. Reprehenderit occaecat reprehenderit veniam veniam eu mollit culpa pariatur do enim et duis ad exercitation. Est voluptate enim duis culpa.</p>
                                                <p>Amet occaecat voluptate aute aliqua id elit exercitation est pariatur adipisicing officia mollit ullamco aliqua. Ullamco anim in aliqua excepteur laboris dolor ipsum ad ipsum nisi deserunt. Occaecat deserunt in ad velit tempor laborum enim nulla nisi et ea velit enim.</p>
                                                <p>Magna aute et qui dolor dolor sunt consectetur tempor cillum pariatur laboris adipisicing dolore duis. Irure commodo eiusmod est in proident duis anim minim eiusmod magna. Ipsum in commodo consectetur eu cillum. Quis culpa eu occaecat culpa. Ex aute consequat sunt eu ex eu exercitation reprehenderit. In nostrud eu ut minim. Aliquip officia dolor cillum nisi anim.</p>
                                                <p>Deserunt ad labore ex consequat adipisicing velit ipsum pariatur. Fugiat enim amet deserunt nostrud qui. Sint irure minim ea amet in eiusmod. Ut id elit mollit est est ad ullamco est consectetur amet. Laboris in aliqua in voluptate nisi culpa aliquip cupidatat do tempor duis.</p>
                                                <button class="button is-tertiary">Lorem ipsum</button>
                                                <div class="modal-footer">
                                                    <p>Ad dolor cupidatat Lorem nostrud est anim veniam nostrud sint sunt. Occaecat mollit labore excepteur quis labore laboris excepteur. Duis do occaecat elit sit consequat. Id incididunt fugiat consectetur ex. Deserunt consequat exercitation ea minim ut excepteur dolore nisi qui sunt id cillum nisi.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

DO

Sur mobile, une modale occupe toujours la largeur maximale. En revanche, à partir de la tablette, la taille est fixe par défaut.
Elle peut néanmoins être dynamique en fonction du breakpoint. Cinq largeurs sont disponibles et appliquent une taille définie en fonction de la taille disponible à l'écran : is-xsmall, is-small, is-medium, is-large et is-xlarge.

WARNING

Attention au rendu des composants que vous intégrerez au sein de la modale, sa largeur étant tout de même assez réduite !

DON'T

Ne mettez pas plusieurs actions au sein d'une modale ! Son but est d'interrompre l'utilisateur dans son parcours afin qu'il effectue un choix ou une action unique avant de continuer.

Panneau latéral

Le panneau latéral est une variante de la modale et s'active avec la facette .is-panel.

Aperçu

Mode responsive

                                                            <div data-modal-context="">
                                        <button aria-label="show modal" class="button is-primary" data-modal-open="">Afficher le panneau latéral</button>
                                        <div class="modal is-panel" data-modal="">
                                            <div class="modal-content">
                                                <button aria-label="close modal" class="modal-close is-large" data-modal-close=""></button>
                                                <div class="modal-title">Titre</div>
                                                <p>Labore ea esse ea minim sit magna amet duis eiusmod est dolore. In irure aliquip anim reprehenderit sint eiusmod quis eiusmod eiusmod commodo aliquip non est do. Aliquip irure officia adipisicing culpa eiusmod do proident exercitation aliquip consequat. Deserunt occaecat aliqua magna esse cupidatat. Commodo tempor laboris mollit aute est ullamco aliqua. Reprehenderit occaecat reprehenderit veniam veniam eu mollit culpa pariatur do enim et duis ad exercitation. Est voluptate enim duis culpa.</p>
                                                <p>Deserunt ad labore ex consequat adipisicing velit ipsum pariatur. Fugiat enim amet deserunt nostrud qui. Sint irure minim ea amet in eiusmod. Ut id elit mollit est est ad ullamco est consectetur amet. Laboris in aliqua in voluptate nisi culpa aliquip cupidatat do tempor duis.</p>
                                                <button class="button is-tertiary">Lorem ipsum</button>
                                                <div class="modal-footer">
                                                    <p>Ad dolor cupidatat Lorem nostrud est anim veniam nostrud sint sunt. Occaecat mollit labore excepteur quis labore laboris excepteur. Duis do occaecat elit sit consequat. Id incididunt fugiat consectetur ex. Deserunt consequat exercitation ea minim ut excepteur dolore nisi qui sunt id cillum nisi.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

DO

Cette variante s'affiche sur tout l'écran en mobile, mais est ancré sur le bord de l'écran à partir de la tablette. Sa largeur est alors limitée mais sa hauteur occupe 100% de l'écran disponible.