Création de fenêtre modale facilement avec la boîte de dialogue HTML5
La fenêtre modale est l'une des interfaces les plus courantes que l'on peut trouver sur les sites Web. Il est couramment utilisé pour transporter un formulaire d'abonnement, télécharger des formulaires (comme celui de WordPress), afficher des notifications et d'autres façons d'attirer l'attention d'un visiteur sur quelque chose d'important.
Pendant tout ce temps, nous utilisons le plugin jQuery comme Dialog UI jQuery, Twitter Bootstrap Modal, ou Popeasy pour en créer un. Mais HTML5 a introduit une nouvelle étiquette appelée
Utilisation de l'élément de dialogue
En utilisant le
Mais notez que lorsque vous l'affichez dans Chrome (qui est le seul navigateur prenant en charge cette balise pour le moment), la fenêtre de dialogue est masquée. Et étant donné la structure HTML ci-dessus, nous ne verrons que le bouton Afficher la boîte de dialogue. Pour afficher la boîte de dialogue, nous pouvons utiliser l'API JavaScript .show()
et utiliser .close()
pour la masquer.
(function () {var dialog = document.getElementById ('window'); document.getElementById ('show'). onclick = fonction () {dialog.show ();}; document.getElementById ('exit'). onclick = function () {dialog.close ();};}) ();
Cliquez sur le "Show Dialog" bouton, et la fenêtre de dialogue apparaîtra au milieu de la fenêtre du navigateur.
Nous pouvons personnaliser la fenêtre de dialogue via CSS. Par défaut, la fenêtre de dialogue couvre l'intégralité de l'espace horizontal dans le navigateur. Donc, spécifions la largeur, comme ça.
dialogue {width: 500px; }
En outre,
Conclusion
HTML a tellement évolué ces dernières années. Ce n'est plus seulement pour construire une page web, nous pouvons même créer une interface interactive avec de nouveaux éléments HTML comme
- Voir la démo
- Source de téléchargement
10 choses que nous devrions cesser de faire dans les discussions de groupe
Il est probablement sûr de dire que la plupart d'entre nous font nos textos sur les applications de messagerie au lieu de SMS de nos jours. La plupart d'entre nous qui sont encore SMS sont cependant assaillis de demandes de téléchargement de telle ou telle application pour économiser sur les coûts de messagerie et parce que les applications de messagerie peuvent vous permettre d'en faire beaucoup plus, comme envoyer des messages simultanément à un grand nombre de personnes .Malheu
Construire des CTAs colorés avec une bibliothèque de boutons de dégradé gratuit
Chaque bonne page d'accueil nécessite un puissant bouton d'incitation à l'action (CTA). Cela guide les visiteurs vers les actions que vous voulez qu'ils prennent, qu'il s'agisse de s'inscrire à un nouveau compte ou d'acheter quelque chose à partir de votre boutique en ligne.Mai