hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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

Cela nous permet de créer une fenêtre modale native d'une manière beaucoup plus facile.

Utilisation de l'élément de dialogue

En utilisant le

élément est le même que la façon dont nous utilisons d'autres éléments HTML. Nous ajoutons simplement le contenu que nous voulons afficher dans la fenêtre de dialogue, comme ça.

Bonjour le monde!

Lorem ipsum dolor assis amet, consectetur adipisicing elit. Earum, inventeur!

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,

L'élément est livré avec un nouveau pseudo-élément appelé ::backdrop . Il est utilisé pour mettre en forme ce fond sombre typique que l'on trouve généralement derrière une fenêtre de dialogue. Il permet aux visiteurs de se concentrer davantage sur le dialogue et de cacher tout ce qui se cache derrière. Il ne semble pas fonctionner pour le moment mais sera soutenu à l'avenir.

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

avec l'API JavaScript. Notez que cet élément est expérimental, qu'il n'est pas encore prêt pour la production et qu'il fonctionne uniquement dans Chrome avec les fonctionnalités expérimentales activées depuis la page chrome://flags .

  • Voir la démo
  • Source de téléchargement

Chrome pour iOS est maintenant Open Source

Chrome pour iOS est maintenant Open Source

Les développeurs d'iOS et de Chrome sont dans l' air du temps car Google a annoncé que la version iOS du navigateur de Google est désormais open source .Chrome pour iOS a toujours été une singularité parmi les autres versions de navigateurs, car il n'a jamais été fait open source au tout début. La rais

(Conseils techniques et de conception)

CSSMatic - Outil d'automatisation qui rend CSS facile pour les concepteurs Web

CSSMatic - Outil d'automatisation qui rend CSS facile pour les concepteurs Web

CSS est un langage de feuille de style très puissant qui vous permet de contrôler l'apparence d'un site. Il fournit l'efficacité dans la conception et les mises à jour. Mais coder à partir de zéro est toujours difficile . Heureusement, vous pouvez trouver de nombreuses petites aides qui couvrent généralement quelques fonctionnalités pour faciliter le codage CSS.Aujourd&

(Conseils techniques et de conception)