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


Construire des modaux en utilisant Pure CSS avec CSS Modal

En conception web, vous devez avoir une bonne organisation du contenu. Cela aide à donner aux utilisateurs des informations plus lisibles et fonctionnelles. Vous pouvez le faire en construisant une mise en page propre et bien rangé sur le site Web. Pour organiser le contenu, vous pouvez utiliser de nombreux éléments et structures d'interface, et le dialogue modal en fait partie.

Si vous avez créé un dialogue modal avec jQuery ou d'autres plugins, nous avons de bonnes nouvelles pour vous. Avec la bibliothèque CSS Modal, vous aurez seulement besoin de CSS pur.

Hans Christian Reinl, celui qui a développé CSS Modal, a inclus beaucoup d'avantages qui vont avec. Certains des avantages sont qu'il peut être utilisé comme un plugin SASS, il existe un support multi-navigateur, il est optimisé pour le mobile, il peut être inséré avec des médias (image, vidéo et son), et il est petit et rapide.

Presque tous les navigateurs modernes supportent CSS Modal . Il a été testé sur Chrome, Firefox, Safari 6, Opera 12, IE8, IE9 +, Windows Phone 8, iOS 6 et Android. Alors qu'il a encore des problèmes mineurs pour Android 2.3 (le défilement étant le plus gros problème, au moment de l'écriture), il fonctionne toujours bien.

Balisage HTML

CSS Modal a trois parties à travailler avec: en- tête, contenu et pied de page . L'en- header est l'endroit où vous pouvez mettre le titre pour le modal. Le contenu est pour afficher les informations importantes que vous souhaitez mettre en évidence. Cette partie prend en charge le texte, les images et le code intégré. Comme pour le footer, vous pouvez ajouter des informations supplémentaires ici, comme un bouton de fermeture, un bouton de nouvelle fenêtre ouverte, etc.

Pour créer une boîte de dialogue modale, vous devez utiliser la balise de section et certains data-attributes, classe et ID prédéfinis. À l'intérieur de la balise de section, un élément enveloppé avec .modal-inner class doit être inclus. Voici le balisage de base:

L' id dans la balise de section est utilisé pour appeler le modal d'une autre fonction, par un lien par exemple, et la valeur peut être changée comme requis. a étiquette sur le code, sera utilisée comme bouton de fermeture modale. L'attribut du href doit être laissé comme indiqué ci-dessus, car il empêchera le défilement de la page vers le haut quand on clique dessus.

L'en- header et le footer sont des parties optionnelles que vous pouvez (ou non) inclure. Mais gardez à l'esprit que si vous utilisez un en-tête, vous devez ajouter un nom d'identifiant unique et changer l'attribut aria-labelledby à la même valeur.

N'oubliez pas d'inclure la bibliothèque CSS Modal, que vous pouvez télécharger depuis sa page GitHub, dans votre projet.

 ..  .. 

Javascript additionnel

Il y a encore quelques problèmes lorsque vous utilisez CSS Modal avec du CSS pur, tels que:

  • Problèmes avec la compatibilité IE 8
  • Bouton d'échappement du clavier pour quitter
  • Défilement de l'arrière-plan
  • Effet de mise au point sur le modal et retour à la page après la fermeture

Donc, pour résoudre ces problèmes, javascript est toujours nécessaire ici. Heureusement, CSS Modal vous a fourni un code source JavaScript léger pour votre commodité. Incluez ce code avant votre balise body fermeture.

Pensée finale

Créer un modal avec du CSS pur présente encore quelques inconvénients, mais il peut devenir un outil alternatif pour enrichir votre site web. Et vous voulez probablement essayer quelque chose de légèrement différent. Avec un peu de créativité, vous pourriez faire des modals plutôt géniaux. Donner un coup de feu.

50 Tasses à café Vous ne ferez pas attention à obtenir un changement

50 Tasses à café Vous ne ferez pas attention à obtenir un changement

Si vous êtes un grand amateur de café comme moi, vous n'aurez jamais assez de tasses à café . Une bonne tasse pour le café ou même le thé vous fait sentir à la maison et confortable - même au bureau. Plutôt qu'une simple pièce de céramique, de nos jours, les tasses peuvent être une œuvre d'art ou un objet qui montre le goût personnalisé de leurs propriétaires .Dans cette colle

(Conseils techniques et de conception)

22 façons de contribuer aux organismes de bienfaisance sans dépenser un centime

22 façons de contribuer aux organismes de bienfaisance sans dépenser un centime

Lorsque vous vous souciez d'une cause sociale, vous consacrez votre temps ou votre argent à l'atteindre. Cependant, tout le monde n'a pas assez de ressources à consacrer à une dotation. Si vous voulez contribuer à des organismes de bienfaisance, mais que vous n'avez pas assez de moyens et de moyens pour vous retenir, alors j'ai une solution pour vous.Il

(Conseils techniques et de conception)