Vidéo: CSS / JavaScript : Créer une fenêtre modale en 2019 2025
AJAX permet aux programmeurs HTML5 et CSS3 de créer des boîtes de dialogue personnalisées. JavaScript fournit quelques boîtes de dialogue (les boîtes de dialogue d'alerte et d'invite), mais celles-ci sont plutôt laides et relativement inflexibles. L'interface utilisateur jQuery inclut une technique pour transformer n'importe quel div dans une boîte de dialogue virtuelle. La boîte de dialogue suit le thème et est redimensionnable et mobile.
Construire la boîte de dialogue n'est pas difficile, mais vous devez pouvoir l'activer et le désactiver avec du code, ou cela ne va pas agir comme une boîte de dialogue appropriée (qui imite une fenêtre dans le fonctionnement système):
-
Créez la div que vous souhaitez utiliser comme boîte de dialogue.
Créez un div et donnez-lui un identifiant pour pouvoir le transformer en nœud de boîte de dialogue. Ajoutez l'attribut title et le titre apparaît dans la barre de titre de la boîte de dialogue.
La classe de boîte de dialogue vous permet d'avoir une boîte de dialogue personnalisée, mobile et de taille cohérente avec le thème de page installé.
-
Transforme le div dans une boîte de dialogue.
Utilisez la méthode dialog () pour transformer le div en nœud de boîte de dialogue jQuery dans la fonction init ():
$ ("# dialog"). dialogue(); -
Masquer la boîte de dialogue par défaut.
Habituellement, vous ne voulez pas que la boîte de dialogue soit visible avant qu'une sorte d'événement ne se produise. Dans cet exemple particulier, il se peut que vous ne souhaitiez pas que la boîte de dialogue s'affiche avant que l'utilisateur clique sur un bouton. Vous pouvez mettre du code pour fermer la boîte de dialogue dans la fonction init () afin que la boîte de dialogue n'apparaisse pas avant d'être invoquée.
-
Fermez la boîte de dialogue.
Pour fermer une boîte de dialogue, reportez-vous au nœud de la boîte de dialogue et appelez à nouveau la méthode dialog (). Cette fois-ci, envoyez la valeur unique "close" en tant que paramètre, et la boîte de dialogue se fermera immédiatement:
// initialement close dialog $ ("# dialog"). dialogue ("fermer"); -
Cliquer sur le X ferme automatiquement la boîte de dialogue.
La boîte de dialogue comporte un petit X qui ressemble à l'icône Fermer la fenêtre sur la plupart des systèmes de fenêtrage. L'utilisateur peut fermer la boîte de dialogue en cliquant sur cette icône.
-
Vous pouvez ouvrir et fermer la boîte de dialogue avec du code.
Mes boutons Ouvrir la boîte de dialogue et Fermer la boîte de dialogue appellent des fonctions qui contrôlent le comportement de la boîte de dialogue. Par exemple, voici la fonction attachée au bouton Open Dialog:
function openDialog () {$ ("# dialog"). dialog ("open");} // fin openDialog
