Modèles CSS

Modèles construits à partir de CSS pur

VeuillezVisitez le sitePour lire plus sur ce projet et en se référant àFAQEn cas de question.

C’est quoi

Créé avec CSS pur :CSS Modal est construit à partir de CSS pur. JavaScript n'est que pour le sucre. Cela les rend parfaitement accessibles.

Optimisés pour mobile :Les modules sont conçus en utilisant un web responsive. Ils fonctionnent sur toutes les tailles d'écran d'un petit téléphone portable jusqu'à haut écran de résolution.

Utilisez le plugin Sass :Vous pouvez utiliser CSS Modal commeSass Plugin et appliquer à vos classes personnalisées. pas besoin de comprendre tout le code.

Quelques autres avantages :Accessible, cross-browser, adaptatif aux médias, petit et rapide!

Comment utiliser

S'il vous plaît être conscient que les modules sont placés au-dessus les uns des autres si vous ouvrez un module dans un autre. vous pouvez ajouter un attribut de donnéesdata-stackable="false"à le modal afin de le rendre non-stackable.

Marqueur

Vous devez inclure la marque et le contenu pour les modules sur votre site. Effet positif sur le SEO. le code d'exemple:

<section class="modal--show" id="modal-text" tabindex="-1"
        role="dialog" aria-labelledby="modal-label" aria-hidden="true">

    <div class="modal-inner">
        <header id="modal-label"><!-- Header --></header>
        <div class="modal-content"><!-- The modals content --></div>
        <footer><!-- Footer --></footer>
    </div>

    <a href="#!" class="modal-close" title="Close this modal" data-close="Close"
        data-dismiss="modal">?</a>
</section>

Leidl'attribut est celui qui identifie le modal. vous pouvez lier à ce ID de partout.

Veuillez noter que l’ID ne peut pas inclure le/caractéristiques, puisque cette nécessaires pour identifier les modules stagnés.

Utiliser le clavier et le footer est facultatif. simplement supprimer les tags si vous ne les voulez pas dans un module.

Vous devriez laisser l'attribut href du lien de cette manière pour fermer le modal en ordre Pour empêcher la page de tourner vers le haut lorsque vous cliquez sur elle.

Rappelez-vous de définir un identifiant unique pour le titre et de modifier le aria-labelledbyattribuer la même valeur.

Vous connectez à un modal en mettant simplement l'ID à un élément de lienhrefcomme ça :

<a href="#modal">Modal</a>

Si vous voulez désactiver l'appel modal de l'hash de l'emplacement, vous devez ajouter data-cssmodal-nohashsur le lien.

Le JavaScript

Comme indiqué ci-dessus, vous n'avez pas besoin de JavaScript pour obtenir une bonne expérience de CSS Mais il y a quelques problèmes dans lesquels JavaScript aide:

Compatibilité IE 8 (si vous avez besoin de compatibilité complète, veuillez inclure jQuery).
La pression d'échappement : si vous pressezÉcsur votre clavier tandis que le modal est visible Ce comportement ne peut pas être atteint uniquement avec CSS.
Prévenir la page d'arrière-plan de scrolling: Si vous scrollez dans le modal et Vous atteignez la fin que vous ne voulez pas que la page dans le fond soit scrollée. empêcher ce JavaScript pousse un sélectionneur de classe CSS à l'élément du corps.
Être accessible: Pour obtenir l'accent du navigateur sur le modal et de retour après La fermeture.
Événements d'arrivée: Lorsqu'un modal ouvre un événement d'arrivée est appelé cssmodal:showLorsque le module est caché, un événement est appelécssmodal:hideest déclenchée.
Pour ajouter ce comportement à votre site, veuillez inclure le fichier JavaScript modal.js juste avant la fermeture du corps-tag :

<script src="js/modal.js"></script>

Support de navigateur

Ce module est conçu pour fonctionner sur tous les navigateurs modernes. n'inclut pas Internet Explorer 7 ou inférieur. mais nous traitons avec IE 8 – bien, à Du moins ça fonctionne.

Sur Safari mobile pour iOS et Android 4+, il est assez bien testé, tandis que Android 2.3 Il y a des problèmes (le plus grand problème) est scrollé) Il fonctionne également sur Windows Phone 8.

Dans les chiffres :

Chromium
Firefox
Safari 6x
L’Opéra 12
Internet Explorer 8 (functionnel, y compris jQuery si vous voulez un support pour Les événements)
Internet Explorer 9 et plus
Les 6
Android 2.3 (comme fonctionnel)
Mise à jour Android 4.x
Windows Phone 8

Médias

Veuillez noter que vous devez cesser de jouer des vidéos ou de l'audio manuellement après Il y a des modèles, il y aUn PluginPour cela cependant.

Événements

Il y a un événementcssmodal:showIl s’agit de la modalité après que la modalité est Événement : Un autre événementcssmodal:hideIl est libéré après que le modal soit caché.

Vous pouvez utiliser les événements en les abonnant comme s’ils étaient des événements cliquant ou Voici un exemple d’utilisation de jQuery :

$(document).on('cssmodal:show', function (event) {
    console.log(event);
});

Il n'y a pas d'événements dans IE8.Veuillez en savoir plus et utiliser jQuery ou Quelque chose pour créer des événements personnalisés.

Plugins

Nous avons un couple pour le modal pour l'améliorer:

Récession - Récession modale à la taille des éléments d'entrée
Galerie - Un plug-in lightbox (en lien avec la reprise)
HTML5 Video - Télécharger des vidéos dans le modal
Ampleur maximale - Sélectionnez une largeur maximale personnalisée sur une base par module

Rapports de bug et demandes de fonctionnalités

Si vous avez quelque chose qui vaut la peine d'être inclus dans le projet, veuillez Ouvrir une questionPour plus La discussion.

Veuillez voir leSection sur la contribution sur le site.

Les contributeurs

C’est un projet parà Hans Christian ReinlMerci de sortir àTous les autres contributeurs.