Création de fenêtre modale facilement avec la boîte de dialogue HTML5

Bonjour le monde! 
Lorem ipsum dolor assis amet, consectetur adipisicing elit. Earum, inventeur!
Sortie 
 Afficher la boîte de dialogue 

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

Les concepteurs devraient-ils commencer à l'école de design?

Le design graphique et la conception web, est devenu un cheminement de carrière populaire dans la dernière décennie. En tant que tel, peu importe qu'un aspirant designer décide de fréquenter une école traditionnelle de briques et de mortier ou une école en ligne, il y a toujours une pléthore de classes professionnelles, diplômes et certifications pour les aider à démarrer dans ce domaine compétitif.Pourtant, b

(Conseils techniques et de conception)

Créer un chargeur animé Favicon avec JavaScript

Les favicons sont une partie cruciale de l'image de marque en ligne, ils donnent un signal visuel aux utilisateurs, et les aident à distinguer votre site des autres. Bien que la plupart des favicons soient statiques, il est également possible de créer des favicons animés .Un favicon constamment en mouvement est certainement ennuyeux pour la plupart des utilisateurs, et nuit également à l'accessibilité, mais quand il est seulement animé pendant une courte période en réponse à une action de l'utilisateur ou à un événement de fond, il peut fournir des informations visuelles supplémenta

(Conseils techniques et de conception)