Modal

Gérez des boites de dialogue de façon réactives et accessibles.

Vue d'ensemble

L'élément de <dialog> ^{MDN Référence} est idéal pour afficher des informations contextuelles ou confirmer des actions par l'utilisateur. Les boites de dialogue augmentent l'expérience utilisateur et sont utiles pour demander une action sur la même page. cela peut être parce que, il faut juste afficher un message d'information, remplir un petit formulaire ou demander une confirmation de la part de l'utilisateur, comme confirmer ou annuler.

Les boites de dialogue sont généralement constitué de 2 à 3 éléments : l'en-tête <header>, le corps <article> et le pied de page <footer>. Ceux-ci servent de conteneurs sémantiques. L'en-tête propose généralement un titre et un bouton de fermeture. Le corps, contient les entrées de formulaire et les informations. Et enfin, le pied de page contient le ou les boutons d'actions. Il a noté, que la boîte de dialogue ne dépassera jamais la hauteur de la page. Ce qui signifie que si le conteneur du corps est important, la barre de défilement verticale, apparaitra automatiquement sur celui-ci.

Il est conseillé, d'ajouter l'attribut autofocus sur le bouton d'annulation principal, ceci afin de garantir que la confirmation d'une action ( un suppression par exemple) est délibérée et non accidentelle. Il est bon de savoir également, qu'une boite de dialogue peut-être fermer grâce à la touche d'échappement ESC.

L' en-tête et le pied de page utilisent Flexbox pour aligner le contenu. Dans le pied de page le contenu est aligné par défaut à droite.

<button data-modal-open-default>Ouvrir une boite de dialogue avec overlay</button>
<button data-modal-open-simple>Ouvrir une boite de dialogue sans overlay</button>

<body>
  ...
  <dialog id="modalTest">
		<header>
			<span class="like-h3" style="--mb:0;">Modal title</span>
			<button modal-result="close" class="close" aria-label="Close" >
				<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
					<path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z" />
				</svg>
			</button>
		</header>
		<article>
			<p>
				Nunc nec ligula a tortor sollicitudin dictum in vel enim.
				Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
				Sed eleifend a dui nec ullamcorper.
				Praesent vehicula lacus ac justo accumsan ullamcorper.
			</p>
			<p>
				Nunc nec ligula a tortor sollicitudin dictum in vel enim.
				Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
				Sed eleifend a dui nec ullamcorper.
				Praesent vehicula lacus ac justo accumsan ullamcorper.
			</p>
      ...
		</article>
		<footer>
			<button autofocus modal-result="cancel" class="btn--secondary" aria-label="Fermer">Fermer</button>
			<button modal-result="ok" aria-label="Ok">Ok</button>
		</footer>
	</dialog>

	<dialog id="modalTestSimple" modal-mode="simple">
		<article>
			<header class="header-with-icon">
				<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" style="--txt:var(--warning-background);">
					<title>A warning icon</title>
					<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
					<line x1="12" y1="9" x2="12" y2="13"></line>
					<line x1="12" y1="17" x2="12.01" y2="17"></line>
				</svg>
				<span class="like-h4" style="--mb:0; --txt:var(--danger-background);">
					Etes-vous sur de vouloir supprimer cet élément ?
				</span>
			</header>
		</article>
		<footer>
			<button autofocus modal-result="cancel" class="btn--secondary" aria-label="Annuler">Annuler</button>
			<button autofocus modal-result="confirm" aria-label="Confirmer">Confirmer</button>
		</footer>
	</dialog>

	<script type="module" src="../scripts/script.js"></script>
</body>

import Modalify from "../../src/scripts/modalify.js";

const modalTest = new Modalify("#modalTest");
const modalTestSimple = new Modalify("#modalTestSimple");

const  openDialog = async () => {
	const result = await modalTest.showModal();
	console.log("Modal result = " + result);
}

const  openDialogSimple = async () => {
	const result = await modalTestSimple.showModal();
	console.log("Modal simple result = " + result);
}

window.addEventListener('DOMContentLoaded', () => {
	const openDialogBtn = document.querySelector('[data-modal-open-default]');
	if (openDialogBtn) { openDialogBtn.addEventListener("click", openDialog); }

	const openDialogSimpleBtn = document.querySelector('[data-modal-open-simple]');
	if (openDialogSimpleBtn) { openDialogSimpleBtn.addEventListener("click", openDialogSimple); }
});

Interactions

Généralement, les boites de dialogue sont utilisées pour interagir avec l'utilisateur et permettent de recueillir des informations. Dans une boite de dialogue, les formulaires sont conçus pour fonctionner ensemble. L'idéal est d'avoir un élément <form> qui enveloppe tout le contenu (en-tête, corps et pied de page). Grâce à JavaScript on peut alors, accéder aux données saisies par l'utilisateur. De plus, les boutons d'un formulaire utilisant comme attribut method='dialog' peuvent fermer celle-ci sans JavaScript et transmettre les données saisies.

Sass Swing fournit une classe Javascript Modalify d'aide à la gestion des boites de dialogue. Cette classe permet d'ouvrir, de fermer et de retourner la valeur du bouton clicker. Via l'attribut modal-result="action". Dans le cas où un formulaire est utilisé, la valeur du retour utilisé est celle de l'attribut value="action" du bouton cliqué.

<button data-modal-open-form>Ouvrir une boite de dialogue avec formulaire</button>

<body>
  ...
	<dialog id="modalTestForm">
		<header>
			<span class="like-h3" style="--mb:0;">Choisissez un avatar</span>
			<button data-modal-result="close" class="close" aria-label="Close" >
				<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
					<path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z" />
				</svg>
			</button>
		</header>
		<div class="panel" style="--py:0;">
			<form>
					<label for="avatarImage">
						<input type="file" id="avatarImage" name="avatarImage" accept="image/*">
					</label>
					<small>* Taille maximum : 1Mb</small>
			</form>
		</div>
		<footer>
			<button autofocus value="cancel" class="btn--secondary" aria-label="Annuler">Annuler</button>
			<button type="submit" value="validate" aria-label="Valider">Valider</button>
		</footer>
	</dialog>

	<script type="module" src="../scripts/script.js"></script>
</body>

const SassSwing = windows['sass-swing'];

const modalTestForm = new SassSwing.Modalify("#modalTestForm");

const handleAvatar = (formData) => {
	const file = formData.get('avatarImage')
	if (!file.size) return

	const reader = new FileReader();
	reader.readAsDataURL(file);

	reader.onload = e => {
		const avatar = document.querySelector('.avatar >  img')
		avatar.src = e.target.result;
	}
	modalTestForm.forceFormInputFileReset();
}

const  openDialogForm = async () => {
	const result = await modalTestForm.showModal();

	console.log("Modal Form result = " + result);

	if (result === "validate") {
		handleAvatar(modalTestForm.getFormData());
	}
}

window.addEventListener('DOMContentLoaded', () => {
	const openDialogFormBtn = document.querySelector('[data-modal-open-form]');
	if (openDialogFormBtn) { openDialogFormBtn.addEventListener("click", openDialogForm); }
});

Personnalisation

Grâce aux variables CSS, vous pouvez customiser facilement vos boites de dialogue. Pour plus d'informations reportez-vous à la section Personnalisation