Comment créer une fenêtre popup Bootstrap : Guide complet

Les pop-ups sont un outil de marketing efficace avec de hauts taux de conversion. Vous pouvez les créer vous-même avec peu ou pas de compétences en programmation. Découvrons comment créer des pop-ups et les ajouter au site web en utilisant Bootstrap et appliquer des solutions prêtes à l'emploi.

Créez un pop-up Bootstrap gratuit avec plus de 800 modèles à forte conversion

Commencer

Qu'est-ce qu'un pop-up Bootstrap

Un pop-up est un cadre de site web séparé qui s'affiche au-dessus du reste du contenu pendant le chargement du site, le bloquant temporairement pour attirer l'attention sur un message particulier. Les exemples incluent des annonces, des rappels concernant des achats en attente, des offres d'abonnement aux mises à jour, des demandes de sauvegarde de fichier, etc.

Pop-up Bootstrap est un outil gratuit conçu pour créer des applications web et des sites dynamiques modernes. Il se compose de modèles écrits en langages de balisage HTML et CSS et d'extensions JavaScript.

Ainsi, en utilisant JavaScript, vous pouvez créer des pop-ups modaux liés à un événement spécifique, comme par exemple lorsque le pointeur de la souris quitte le cadre principal ou lorsqu'un certain temps s'écoule. En utilisant le plugin Bootstrap, vous pouvez obtenir des éléments qui remplissent les fonctions suivantes :

proposer d'aller dans un salon de discussion ou de commander un rappel ;
collecter des données pour la segmentation des clients ;
fournir des informations d'aide et de référence ;
afficher du contenu multimédia en plein écran ;
promouvoir des produits et services ;
proposer de s'inscrire pour utiliser toutes les fonctionnalités du site ;
aider un visiteur à trouver les informations dont il ou elle a besoin, etc.

Bootstrap vous permet de créer des outils marketing pratiques et efficaces. Ils aident à focaliser l'attention d'un visiteur sur une offre spécifique et à conduire un visiteur vers l'action cible. Même un peu de connaissances des langages de programmation mentionnés ci-dessus offre une opportunité d'augmenter de manière significative le taux de conversion et d'améliorer les performances financières de l'entreprise.

popup-bootstrap

Comment créer un formulaire pop-up avec Bootstrap

Créer une fenêtre pop-up ne nécessite aucune compétence en programmation, car vous pouvez extraire des extraits de code prêts à l'emploi des dépôts. Découvrons comment créer une fenêtre pop-up en utilisant Bootstrap avec un ensemble minimal d'éléments fonctionnels.

Exemple de création d'un pop-up Bootstrap

Avant de commencer à créer un formulaire pop-up avec Bootstrap, vous devez vous assurer que votre site répond aux exigences du plugin. Elles doivent être considérées pour chaque version spécifique de l'outil. Par exemple, pour connecter l'actuel Bootstrap 5.3, vous devez utiliser le langage de balisage HTML5 avec le design adaptatif qui permet d'ajuster la fenêtre aux paramètres de n'importe quel écran.

La façon la plus simple d'activer Bootstrap est d'ajouter un extrait de code contenant les adresses de modèle CSS et les bibliothèques JavaScript dans la section <head> :

<link href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

Vous pouvez également télécharger une distribution prête à l'emploi depuis GitHub pour l'intégrer dans votre environnement de développement. Les développeurs offrent également d'autres options d'installation, telles que les gestionnaires de paquets.

Comment créer une fenêtre pop-up en utilisant Bootstrap et JavaScript

Les développeurs de Bootstrap proposent l'exemple suivant pour évaluer les capacités de leur outil.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">

Lancer la démo modale

</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Titre de la modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
<h5 class="text-center mb-5">Insérez votre texte ici</h5>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
        <button type="button" class="btn btn-primary">Enregistrer les modifications</button>
      </div>
    </div>
  </div>
</div>

Ce code génère une petite fenêtre pop-up avec un texte et deux boutons. Une simple animation est appliquée — le cadre descend d'en haut, acquérant progressivement des caractéristiques. Il se ferme si vous appuyez sur le bouton correspondant ou en cliquant simplement sur le fond. Dans les deux cas, la fenêtre remonte et s'assombrit, disparaissant complètement.

Examinons cet exemple de plus près.

Appeler une fenêtre pop-up

L'exemple utilise l'option la plus simple — appeler la fenêtre pop-up avec un bouton. Cela est utile si vous proposez à un visiteur un formulaire d'inscription ou de l'aide sur l'utilisation d'une fonction spécifique. Le fragment suivant est responsable du lancement du code :

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">

Lancer la démo modale

</button>

Voulez-vous que la fenêtre s'ouvre automatiquement ? Alors vous devrez plonger dans l'étude JavaScript. Par exemple, vous pouvez utiliser le script suivant pour démarrer la fonction 2 secondes après le chargement de la page :

$(window).load(function(){
   setTimeout(function(){
       $('#myModal').modal('show');
   }, 2000);
});

Une autre option populaire consiste à appeler une fenêtre pop-up lorsque le curseur de la souris sort du cadre principal de l'écran. Réalisant qu'un utilisateur est sur le point de fermer l'onglet, montrez-lui la dernière phrase. Ce script est utilisé à cet effet :

<script>
    function addEvent(obj, evt, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(evt, fn, false);
        } else if (obj.attachEvent) {
            obj.attachEvent("on" + evt, fn);
        }    }    addEvent(document, 'mouseout', function (evt) {
        var modalId = 'exitModal';
        if (evt.toElement === null && evt.relatedTarget === null && !localStorage.getItem('modal.' + modalId)) {
            var modal = new bootstrap.Modal('#' + modalId);
            modal.show();
            localStorage.setItem('modal.' + modalId, '1');
        }
    });
</script>

Le bloc "Modal"

Alors, comment rendre une fenêtre pop-up réactive dans Bootstrap.

La fenêtre pop-up de notre exemple se compose de trois parties :

en-tête avec le nom ;

div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Titre de la modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

fenêtre principale avec une description textuelle ;

<div class="modal-body">

<h5 class="text-center mb-5">Insérez votre texte ici</h5>

</div>

pied de page avec des boutons.

 <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
        <button type="button" class="btn btn-primary">Enregistrer les modifications</button>
      </div>

Cette catégorisation est standard pour les pop-ups créés avec Bootstrap. Cependant, vous pouvez remplir chaque partie à votre discrétion, en utilisant de nombreux éléments fonctionnels des bibliothèques de plugins.

Modifications de la fenêtre pop-up

Le code décrit ci-dessus sera suffisant pour créer des outils de marketing simples. Mais vous pouvez obtenir bien plus en personnalisant les cadres.

Par exemple, le fragment suivant vous permet de définir une certaine taille de fenêtre pop-up :

<div class="modal-dialog modal-OO">...</div>,

où OO est la variable qui spécifie le format souhaité et peut prendre les valeurs suivantes :

sm — correspond à une largeur de 320 pixels ;
lg — 800 pixels ;
xl — 1140 pixels.

Si vous omettez la variable de taille, une fenêtre pop-up de 500 pixels apparaîtra à l'écran par défaut. Pour étirer le cadre en plein écran, utilisez le code suivant :

<div class="modal-dialog modal-fullscreen">

Si vous souhaitez changer l'animation d'une fenêtre pop-up, faites attention à la variable modal-fade. Les bibliothèques Bootstrap offrent une variété d'effets. Par exemple, si vous souhaitez que le cadre fasse un zoom avant comme une caméra, insérez le fragment de code suivant :

<div class="modal fade2" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Pour que l'animation fonctionne correctement, vous devrez également configurer les styles CSS et créer le script approprié :

.fade2 {
    transform: scale(0.9);
    opacity: 0;
    transition: all .2s linear;
    display: block !important;
}
.fade2.show {
    opacity: 1;
    transform: scale(1);
}
et
$('#exampleModal').modal();
function afterModalTransition(e) {
  e.setAttribute("style", "display: none !important;");
}
$('#exampleModal').on('hide.bs.modal', function (e) {
    setTimeout( () => afterModalTransition(this), 200);
})

Une autre fonctionnalité intéressante disponible dans Bootstrap est le blocage d'une fenêtre pop-up. Cela ne vous permet pas de fermer le cadre en cliquant en arrière-plan ou en appuyant sur Esc. Pour accéder au contenu du site, l'utilisateur doit effectuer une action ciblée, telle que s'inscrire après l'expiration de la période d'essai. Dans ce cas, le code suivant est utilisé :

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">

Comment créer un pop-up avec Claspo

Si vous avez besoin d'un élément visuel plus brillant et accrocheur, vous pouvez utiliser une solution prête à l'emploi pour créer des pop-ups.

Une des options les plus pratiques est l'outil Claspo.io. Il vous permet de créer des pop-ups de tout niveau de complexité sans aucune connaissance des langages de programmation — ils sont réalisés selon le principe du "constructeur" en faisant glisser divers éléments à l'écran. Apprenons-en plus sur la création d'un pop-up en utilisant Claspo.

Essayez toutes les fonctionnalités avancées avec le plan gratuit à vie de Claspo

Commencer

Étape 1 : Inscription

Allez sur Claspo et créez un compte. Vous pouvez également vous connecter en utilisant les réseaux sociaux ou votre compte Google.

Choisissez un plan tarifaire adapté. Vous pouvez vous familiariser gratuitement avec les fonctionnalités de Claspo — dans ce cas, trois widgets sur un site avec un nombre total de vues allant jusqu'à 30 000 par mois sont disponibles. De plus, une fenêtre pop-up fournira un lien vers l'outil web.

Les plans tarifaires de Claspo sont abordables et flexibles par rapport à d'autres services. Choisissez la meilleure option pour votre entreprise sans surpayer pour des fonctionnalités et des vues supplémentaires.

Étape 2 : Créer une fenêtre pop-up

Claspo vous guide à travers les étapes suivantes :

définir l'objectif — spécifiez quelle fonction vous souhaitez mettre en œuvre ;

define-the-purpose

sélectionner le format — une fenêtre classique, une bannière, un cadre flottant, etc. ;

select-the-format

paramétrage du style — choisissez le design qui correspond à celui de votre site web ;
choix du modèle — la fenêtre pop-up prend une forme complète ;

choice-of-template

contenu — glissez-déposez des éléments fonctionnels sur le cadre, saisissez du texte, ajoutez des images, etc.

content

L'avantage de l'outil est qu'en quelques minutes, vous pouvez créer non seulement une fenêtre de base avec un texte, mais également un élément visuel attrayant qui capte l'attention du visiteur et offre des taux de conversion élevés.

create-pop-up-window

Étape 3 : Intégration

integration

Lorsque vous créez une pop-up, vous obtenez un script qui lie aux bibliothèques propres de Claspo. Vous pouvez l'intégrer vous-même — l'outil fournit un code prêt à l'emploi et vous aide à trouver où l'insérer. L'intégration avec la plupart des systèmes de gestion de contenu (CMS) populaires, y compris WordPress, est également disponible.

Étape 4 : Lancement

Une fois intégré dans le code de votre site, le pop-up commencera à fonctionner immédiatement. Gérez-le dans l'interface web de Claspo, en modifiant les paramètres si nécessaire et en obtenant des statistiques détaillées. L'outil est également compatible avec le CRM et d'autres logiciels d'entreprise. Son intégration approfondie vous permet de créer des offres personnalisées pour chaque visiteur du site en fonction de l'historique d'activité ou de la segmentation par diverses caractéristiques.

Comment générer rapidement une fenêtre pop-up sur le site : conclusion

En utilisant le pop-up Bootstrap, vous pouvez rapidement générer des fenêtres pop-up, en gérant de manière flexible leur contenu, leurs tailles, leurs fonctions et même les animations d'affichage. Des compétences de base en programmation suffiront pour effectuer les tâches les plus simples car la plupart du code peut être pris dans des dépôts open-source comme GitHub.

Mais si vous recherchez un outil de conversion efficace pour votre site web, cela vaut la peine d'utiliser la solution clé en main de Claspo. Vous pouvez créer des pop-ups éclatants et fonctionnels rapidement et facilement sans aucune connaissance du code! Ils sont assemblés selon le principe du constructeur, en choisissant le design et le contenu, et l'outil les adapte à tous les appareils, écrans et navigateurs.

Vous pouvez essayer toutes les fonctionnalités de Claspo gratuitement ! Inscrivez-vous maintenant pour évaluer le potentiel de l'outil et choisir la meilleure version des pop-ups intelligents pour votre entreprise!

Créez votre pop-up à forte conversion avec Claspo

Commencer