Comment créer des fenêtres contextuelles Vue Modal

Vous avez besoin de certains éléments sur votre site web pour vous démarquer de vos concurrents. Que vous souhaitiez annoncer quelque chose, promouvoir vos produits ou collecter des soumissions de formulaires, les popups vue modale sont là pour vous. Vous pouvez utiliser des popups modaux pour attirer l'attention et atteindre vos objectifs.

Les modaux Vue.js sont conçus pour attirer l'attention grâce à leurs titres et textes attrayants. Les composants modaux Vue sont généralement préférés car ils sont faciles à créer et à intégrer correctement avec d'autres plates-formes.

Pour atteindre votre public cible, vous devriez bénéficier de popups. Nous vous expliquerons comment créer facilement des popups vue modale afin que vous puissiez les utiliser pour augmenter vos conversions de ventes.

Commençons!

Qu'est-ce qu'un modal dans Vue.js ?

Vue.js est un framework JavaScript qui vous permet de créer des interfaces utilisateur. Comme il s'agit d'un framework open source, vous pouvez l'utiliser facilement pour créer certains composants de votre site Web. Outre la création d'interfaces utilisateur, vous pouvez également créer des applications d'une seule page en utilisant vue.js.

Les modaux sont l'un des composants les plus utilisés dans les sites Web. Vue modal vous aide à créer des parties accrocheuses sur votre site. Par exemple, vous pouvez créer des fenêtres contextuelles et des dialogues avec des modaux pour mettre l'accent sur certaines choses concernant vos produits et services.

Fenêtre contextuelle Vue modale

Les fenêtres contextuelles modales Vue sont très faciles à créer et à utiliser. Outre leur création pratique, ces popups sont également utiles pour attirer l'attention du public. Ce type de fenêtres contextuelles peut être utilisé pour créer des inscriptions à des newsletters, des formulaires de connexion et des formulaires de commentaires. En outre, vous pouvez utiliser les fenêtres contextuelles de vue modale pour afficher des annonces et des notifications.

De plus, les fenêtres contextuelles modales peuvent afficher la dernière page mise à jour, il n'est donc pas nécessaire de la recharger. Enfin, cela signifie que vous n'avez pas besoin d'écrire les mêmes informations à plusieurs reprises. Ainsi, moins de temps est consacré à remplir les formulaires !

Vous pouvez créer des popups modaux dans vue Javascript, à la fois pour les ordinateurs de bureau et les appareils mobiles. Mais comment fait-on une vue modale ? Vous pouvez utiliser vue.js après avoir appris ses composants et sa syntaxe. Il existe de nombreux modèles et exemples de codes que vous pouvez personnaliser pour votre site Web.

De nombreux outils en ligne tels que Vue CLI vous aident à créer vos projets vue modaux. De plus, vous pouvez commencer à apprendre à créer vos propres codes avec des modèles de code.

Vous pouvez également créer des composants vue modaux en utilisant facilement BootstrapVue.

Il existe de nombreux composants vue modaux spécifiques que vous pouvez créer. Consultez ces exemples de vue modale et ces vues modales personnalisables pour en savoir plus sur les composants vue modaux.

Par exemple, vous pouvez ajouter le code vue modal donné aux parties pertinentes de votre site Web :

 <script> export default { props: { show: Boolean } } </script> <template> <Transition name="modal"> <div v-if="show" class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <slot name="header">default header</slot> </div> <div class="modal-body"> <slot name="body">default body</slot> </div> <div class="modal-footer"> <slot name="footer"> default footer <button class="modal-default-button" @click="$emit('close')" >OK</button> </slot> </div> </div> </div> </div> </Transition> </template> <style> .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: table; transition: opacity 0.3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } .modal-container { width: 300px; margin: 0px auto; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); transition: all 0.3s ease; } .modal-header h3 { margin-top: 0; color: #42b983; } .modal-body { margin: 20px 0; } .modal-default-button { float: right; } /* * The following styles are auto-applied to elements with * transition="modal" when their visibility is toggled * by Vue.js. * * You can easily play with the modal transition by editing * these styles. */ .modal-enter-from { opacity: 0; } .modal-leave-to { opacity: 0; } .modal-enter-from .modal-container, .modal-leave-to .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); } </style>

(La source)

Après avoir ajouté ce code, la fenêtre contextuelle finale de la vue modale ressemblera à ceci :

Vous pouvez modifier la position, les polices, les couleurs des popups de vue modale et jouer avec !

Créez facilement une fenêtre contextuelle Vue Modal avec Popupsmart

Popupsmart vous aide à créer des popups pilotés par des campagnes afin que vos clients puissent être informés de vos services. Grâce à ces popups bien conçus, vous pouvez augmenter vos conversions de ventes.

Popupsmart vous aide à atteindre votre public cible avec des options de ciblage détaillées. De plus, Popupsmart est entièrement compatible avec les popups Vue.js !

En dehors de cela, vous n'avez pas besoin de connaître le codage pour utiliser Popupsmart. Comme il s'agit d'un outil sans code, vous pouvez concevoir vos popups en moins de 5 minutes et commencer à les utiliser sur votre site Web ! Vous pouvez afficher vos fenêtres contextuelles après avoir ajouté un code JavaScript d'une ligne aux parties d'en-tête du site Web.

Jetons un coup d'œil à la création d'un popup avec le constructeur de popup intelligent Popupsmart ensemble.

Tout d'abord, inscrivez-vous si vous ne l'avez pas déjà fait et connectez-vous à votre compte Popupsmart. Ouvrez ensuite le générateur de popup.

Après avoir cliqué sur la partie "Créer une nouvelle fenêtre contextuelle", un écran indiquant "Sélectionnez votre objectif commercial" s'ouvrira.

Dans cette section, vous pouvez choisir "Développer votre liste d'e-mails" et "Augmenter les appels téléphoniques" pour collecter les e-mails et les numéros de téléphone de votre public. Les parties "Afficher l'annonce" et "Promouvoir vos produits" servent à afficher des messages et des mises à jour sur votre produit et service à vos clients.

La section "Conformez-vous aux lois sur les cookies" permet d'obtenir l'autorisation de votre public concernant le stockage des cookies. La « soumission de formulaire de collecte » consiste à recueillir des informations auprès de votre public.

Pour ce guide, nous avons choisi l'objectif "Afficher l'annonce" .

L'écran de l'éditeur Popup s'ouvre une fois que vous avez choisi votre objectif commercial. Il existe de nombreux modèles de popup personnalisables. Selon votre entreprise, vous pouvez éditer et personnaliser votre popup dans la rubrique « Personnaliser ».

Vous pouvez personnaliser le titre et les parties de description avec des phrases CTA. Vous pouvez également modifier l'image du modèle et ajouter l'image de votre produit ici. Après cela, passez à la partie "Cible" et décidez de votre public cible.

Après cela, vous pouvez passer à la section "Publier" et copier le code donné de votre popup à partir de cette partie :

Copiez et collez ce code sur votre site Web et cliquez sur le bouton Enregistrer et publier !

Peasy citron pressé facile! Vous pouvez maintenant utiliser votre popup et annoncer les mises à jour et les actualités de votre entreprise. Popupsmart est compatible avec vue.js et vous n'avez besoin d'aucun plugin ou extension pour afficher votre popup.

Derniers mots

Les popups sont un excellent moyen d'augmenter vos conversions de ventes et d'atteindre vos clients. Vous pouvez recueillir les commentaires de vos clients et améliorer votre site Web en conséquence. La promotion de vos produits et l'offre d'offres spéciales sont également possibles avec les popups.

La création de fenêtres contextuelles vue modale est facile et, comme elles sont personnalisables, vous pouvez en créer librement une pour le style de votre marque.

Popupsmart s'intègre à vue.js sans aucun problème. Vous pouvez créer vos popups avec Popupsmart même si vous n'avez aucune connaissance en codage.

Nous avons expliqué en détail comment créer des fenêtres contextuelles vue modale pour votre site Web. S'il vous plaît partagez pourquoi vous utilisez les popups vue modale et vos suggestions dans les commentaires avec nous! :-)

Consultez également ces articles de blog :

• Comment créer des popups CSS Modal Tailwind pour votre site Web
• Comment créer des formulaires contextuels pour votre site Web (2022 et gratuit)