Présentation : Launchy !

Avez-vous déjà besoin d'ajouter une fenêtre modale à votre application ou à votre site Web ? Vous n'avez pas le temps de le coder vous-même et vous ne savez pas quel script tiers ajouter ? Qu'est-ce que c'est? Vous voulez également vous assurer qu'il est entièrement accessible via un clavier et un lecteur d'écran ?

Ne cherchez plus, mon ami ! Lancement ! est un script de fenêtre modal entièrement accessible, super facile à mettre en œuvre et à utiliser. C'est gratuit et open source , bien testé, et ça marche !

Comment obtenir Launchy ?

Il existe plusieurs façons de mettre la main sur une copie de Launchy ! :

Fichier brut inclus

1. Copiez et collez la source de launchy.js dans un nouveau fichier JavaScript de votre projet.

2. Incluez le script dans votre modèle :

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

Via le MNP

La meilleure approche serait probablement d'utiliser npm pour installer le script. De cette façon, vous obtenez automatiquement la dernière version dès qu'elle est disponible !

1. Exécutez la commande :

    npm i launchy-modal- window

   Cela installera le script dans votre répertoire node_modules .

2. Incluez le script dans votre modèle :

    <script src="node_modules/launchy-modal-window/launchy.js"></script>

Maintenant que je l'ai, comment l'utiliser ?

Utiliser Launchy ! c'est hyper facile !

1. Ajoutez votre contenu HTML à votre page ou à votre modèle que vous souhaitez voir apparaître dans la fenêtre modale, ou recherchez du contenu existant.

   Exemple:

    <h2>Top 5 Most "Popular" Websites</h2> <ul> <li>Google.com</li> <li>Youtube.com</li> <li>Facebook.com</li> <li>Baidu.com</li> <li>Wikipedia.org</li> </ul>

2. Maintenant, enveloppez simplement votre contenu avec un conteneur HTML avec un attribut data-launchy . Vous avez également besoin d'un attribut data-launchy-text qui se traduit par le texte de contrôle du lanceur :

    <div data-launchy data-launchy-text="Popular websites!"> <h2>Top 5 Most "Popular" Websites</h2> <ul> <li>Google.com</li> <li>Youtube.com</li> <li>Facebook.com</li> <li>Baidu.com</li> <li>Wikipedia.org</li> </ul> </div>

C'est ça! Lancement ! détectera cette div avec les attributs data-launchy-* et générera tout ce qui est nécessaire pour construire la fenêtre modale pour vous !

Une note sur le style

Lancement ! n'est livré avec aucun style par défaut, mais propose de nombreuses classes CSS auxquelles vous pouvez vous connecter !

Consultez le fichier démo styles.scss pour un exemple d'utilisation des classes disponibles. Sinon, essayez un style personnalisé sur la démo CodePen !

• Découvrez le code source sur GitHub !
• Vous pouvez essayer cet exemple HTML sur la démo CodePen !

Dites-moi ce que vous en pensez et si vous l'essayez, comment ça s'est passé ! Trouver un bug ou avoir une idée ? N'hésitez pas à ouvrir un nouveau sujet !

Bon piratage ! 💻😄💖