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


Créer, contrôler et personnaliser une meilleure fenêtre modale pour votre site en utilisant Vex

Une fenêtre modale est très utile lorsque vous voulez que les utilisateurs interagissent avec votre site . De temps en temps, une fenêtre modale est appelée une boîte modale que la fenêtre est utilisée pour afficher la boîte de dialogue . Dans un article précédent, nous vous avions guidés à travers un tutoriel sur la façon de faire des fenêtres modales en utilisant Bootstrap Plugin.

Dans ce post, nous allons vous présenter un autre grand assistant pour créer des fenêtres modales, en utilisant la bibliothèque jQuery à savoir Vex .

Vex est une bibliothèque Javascript complète et hautement personnalisable qui vous aide à créer des fenêtres modales en toute simplicité. Ce plugin jQuery léger remplace la boîte de dialogue native du navigateur.

Configuration de base

Premièrement, nous devons préparer le script Vex. Vous pouvez le télécharger ici. Ensuite, incluez le dernier jQuery dans l'en-tête avec le script suivant.

Pour utiliser Vex, vous devez inclure les fichiers vex.js et vex.css . Plutôt que d'utiliser vex.js et vex.dialog.js, vous pouvez simplement inclure vex.combined.js ou vex.combined.min.js .

Maintenant, nous allons ajouter ces bibliothèques Vex à l'en-tête comme ça.

Dans le script ci-dessus, vex-theme-os.css qui est un autre thème Vex prêt à l'emploi. Pour utiliser un autre thème, vous pouvez voir la documentation fournie avec la démo ici.

Appliquer Vex

Les méthodes les plus basiques dans Vex sont vex.dialog.alert, vex.dialog.confirm et vex.dialog.prompt . Et il y a vex.dialog.open qui est la combinaison de ces méthodes pour une utilisation plus avancée, par exemple pour créer un formulaire, une connexion ou une fenêtre modale multiple .

Et maintenant, nous allons essayer de construire une fenêtre modale de connexion simple en utilisant la méthode vex.dialog.open . Avant de commencer la méthode, nous devons d'abord appliquer le thème que nous avons utilisé avec l'option defaultOptions.className . Pour appliquer le thème, vous pouvez facilement ajouter le nom du thème comme option de valeur comme ça.

 vex.defaultOptions.className = 'vex-theme-os'; 

Comme mentionné précédemment, la méthode vex.dialog.open est essentiellement la combinaison de 3 autres méthodes. Le code suivant est une démo plus complexe dans laquelle nous appelons alert, confirm et demandons en interne de créer une boîte de dialogue de connexion.

Ainsi, notre boîte de connexion apparaîtra comme suit.

Pensée finale

Il existe de nombreux autres outils pour créer une fenêtre modale, mais Vex est plutôt complet et hautement configurable. Vous pouvez ajouter des alertes, des invites, des confirmations, des formulaires ou d'autres options de saisie à la boîte et même l'animer . D'autres fonctionnalités intéressantes sont plusieurs fenêtres modales et des boîtes de dialogue à l'intérieur des boîtes modales, il fonctionne très bien et en douceur dans les appareils mobiles.

Vex est également livré avec des thèmes prêts à l'emploi pour rendre le dialogue conforme à votre style, que ce soit sur CSS ou SASS. Il est également compatible avec la plupart des navigateurs modernes et très léger - seulement sous 7kb minifié (2kb minifié + gzippé).

6 façons de faire des recherches de mots clés comme un pro

6 façons de faire des recherches de mots clés comme un pro

La recherche par mot-clé est peut-être le plus vieux tour parmi toutes les meilleures pratiques de SEO. Eh bien, il devrait être, parce que ces petites informations vous donnent un aperçu plus solide sur vos utilisateurs, leurs tendances et leurs demandes.Cependant aujourd'hui, de nombreux spécialistes du marketing SEO ont commencé à prendre la recherche de mots-clés pour acquis, probablement parce que ces jours-ci, vous ne pouvez pas gagner des utilisateurs pour votre site «juste» grâce à la recherche de base mot-clé . Vous devez

(Conseils techniques et de conception)

Journée de démonstration: 5 conseils pour prévenir les bugs et les gaffes

Journée de démonstration: 5 conseils pour prévenir les bugs et les gaffes

Le logiciel est sensible . Let's face it, un ">" pourrait être la différence entre ressembler à un expert, ou vouloir disparaître immédiatement de la surface de la Terre. Après des années de développement et des années à le faire professionnellement (pour vivre) avec mon visage et mon nom derrière tout ce que nous produisons, j'ai fini par comprendre la théorie de "quand, pas si, ça casse".Laissez-moi

(Conseils techniques et de conception)