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
Comment activer la transformation CSS dans IE6-8 [Astuce rapide]
Les navigateurs modernes ont beaucoup de support pour la plupart des propriétés CSS3. Vous pouvez essentiellement appliquer facilement des animations CSS, des transformations et des dégradés. Cependant, il existe encore de nombreux utilisateurs d'anciennes versions de versions d'Internet Explorer qui ne prennent pas exactement en charge les nouvelles propriétés CSS3 . Dans
Comment installer Windows Boot Camp sans lecteur optique
Note de l'éditeur: Auparavant, nous avons publié un article de Daniel Pataki sur Comment installer Windows sur Mac quand tout le reste échoue. Alvaro est l'un des nombreux lecteurs qui ont laissé un commentaire sur ce sujet. Voici sa version sur comment obtenir Windows Boot Camp, et donc, Windows, sur votre Mac .J