Comment Créer une Forme Popup Avec CSS et JavaScript

Les formes popup sont une bonne façon d'avoir des dialogues sur votre site Web. Vous pouvez créer des formulaires popup de connexion, des formulaires de contact ou n'importe quels autres types des formes sur votre site.

Le bouton popup attirera le regard du visiteur. Quand un utilisateur clique sur le bouton popup, la forme apparaîtra sur l'écran.

Ici, apprenez comment créer une forme popup avec CSS et JavaScript pas à pas.

Ajoutez HTML

Utilisez la balise HTML <form> en ajoutant une forme pour la saisie de l'utilisateur. Ensuite, créez votre champs <input> pour votre forme. Donnez une class à votre forme pour ajouter un style pour elle, et un id pour connecter les scripts.

Exemple

<div class="form-popup" id="popup-Form">
      <form action="/action_page.php" class="form-container">
        <h2>Veuillez vous connecter</h2>
        <label for="email">
        <strong>E-mail</strong>
        </label>
        <input type="text" placeholder="Votre Email" name="email" required>
        <label for="psw">
        <strong>Mot de passe</strong>
        </label>
        <input type="password" placeholder="Votre mot de passe" name="psw" required>
        <button type="submit" class="btn">Se connecter</button>
        <button type="submit" class="btn cancel" onclick="closeForm()">Annuler</button>
      </form>
    </div>

2) Stylez avec CSS

Donnez des styles à votre forme popup et définissez display: none; afin de le masquer avant l'utilisateur cliquera sur le bouton “Ouvrir la Forme”.

Stylez votre champs de saisie, les boutons de connecter et d'annuler, et la position de la forme popup là où elle doit être placée. Ici, elle est positionnée au centre.

* {
box-sizing: border-box;
}
body {
font-family: Roboto, Helvetica, sans-serif;
}
/* Fixer le bouton sur le côté gauche de la page */
.open-btn {
display: flex;
justify-content: left;
}
/* Stylez et fixez le bouton sur la page */
.open-button {
background-color: #1c87c9;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
opacity: 0.8;
position: fixed;
}
/* Positionnez la forme Popup */
.login-popup {
position: relative;
text-align: center;
width: 100%;
}
/* Masquez la forme Popup */
.form-popup {
display: none;
position: fixed;
left: 45%;
top:5%;
transform: translate(-45%,5%);
border: 2px solid #666;
z-index: 9;
}
/* Styles pour le conteneur de forme */
.form-container {
max-width: 300px;
padding: 20px;
background-color: #fff;
}
/* Largeur complète pour les champs de saisie */
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 10px;
margin: 5px 0 22px 0;
border: none;
background: #eee;
}
/*Quand les entrées sont concentrées, faites quelque chose */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Stylez le bouton de connexion*/
.form-container .btn {
background-color: #8ebf42;
color: #fff;
padding: 12px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
/* Stylez le bouton pour annuler */
.form-container .cancel {
background-color: #cc0000;
}
/* Planez les effets pour les boutons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}

2) Ajoutez JavaScript

Utilisez display = "block" pour la fonction openForm() et style.display = "none" pour la fonction closeForm() pour afficher et fermer la forme quand elle est cliquée.

function openForm() {
document.getElementById("popupForm").style.display = "block";
}
function closeForm() {
document.getElementById("popupForm").style.display = "none";
}

Maintenant, voyons à quoi une forme de connexion Popup ressemblera:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      * {
      box-sizing: border-box;
      }
      body {
      font-family: Roboto, Helvetica, sans-serif;
      }
      /* Fixez le bouton sur le côté gauche de la page the button on the left side of the page */
      .open-btn {
      display: flex;
      justify-content: left;
      }
      /* Stylez et fixez le bouton sur la page */
      .open-button {
      background-color: #1c87c9;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      opacity: 0.8;
      position: fixed;
      }
      /* Positionnez la forme Popup */
      .login-popup {
      position: relative;
      text-align: center;
      width: 100%;
      }
      /* Masquez la forme Popup */
      .form-popup {
      display: none;
      position: fixed;
      left: 45%;
      top:5%;
      transform: translate(-45%,5%);
      border: 2px solid #666;
      z-index: 9;
      }
      /* Styles pour le conteneur de la forme */
      .form-container {
      max-width: 300px;
      padding: 20px;
      background-color: #fff;
      }
      /* Largeur complète pour les champs de saisie */
      .form-container input[type=text], .form-container input[type=password] {
      width: 100%;
      padding: 10px;
      margin: 5px 0 22px 0;
      border: none;
      background: #eee;
      }
      /* Quand les entrées sont concentrées, faites quelque chose */
      .form-container input[type=text]:focus, .form-container input[type=password]:focus {
      background-color: #ddd;
      outline: none;
      }
      /* Stylez le bouton de connexion */
      .form-container .btn {
      background-color: #8ebf42;
      color: #fff;
      padding: 12px 20px;
      border: none;
      cursor: pointer;
      width: 100%;
      margin-bottom:10px;
      opacity: 0.8;
      }
      /* Stylez le bouton pour annuler */
      .form-container .cancel {
      background-color: #cc0000;
      }
      /* Planez les effets pour les boutons */
      .form-container .btn:hover, .open-button:hover {
      opacity: 1;
      }
    </style>
  </head>
  <body>
    <h2>Forme Popup</h2>
    <p>Cliquez sur le bouton "Ouvrir la forme" pour ouvrir la forme Popup.</p>
    <div class="open-btn">
      <button class="open-button" onclick="openForm()"><strong>Ouvrir la forme</strong></button>
    </div>
    <div class="login-popup">
      <div class="form-popup" id="popupForm">
        <form action="/action_page.php" class="form-container">
          <h2>Veuillez vous connecter</h2>
          <label for="email">
          <strong>E-mail</strong>
          </label>
          <input type="text" id="email" placeholder="Votre Email" name="email" required>
          <label for="psw">
          <strong>Mot de passe</strong>
          </label>
          <input type="password" id="psw" placeholder="Votre Mot de passe" name="psw" required>
          <button type="submit" class="btn">Connecter</button>
          <button type="button" class="btn cancel" onclick="closeForm()">Fermer</button>
        </form>
      </div>
    </div>
    <script>
      function openForm() {
        document.getElementById("popupForm").style.display="block";
      }
      
      function closeForm() {
        document.getElementById("popupForm").style.display="none";
      }
    </script>
  </body>
</html>

Il est également possible de séparer la boîte modale et de la fermer en cliquant n'importe où en déhors de la boîte. Pour faire cela, vous devez juste utiliser la propriété target event qui rend l'élément qui déclenche l'événement.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      * {
      box-sizing: border-box;
      }
      body {
      font-family: Roboto, Helvetica, sans-serif;
      }
      /* Fixez le bouton sur le côté gauche de la page the button on the left side of the page */
      .open-btn {
      display: flex;
      justify-content: left;
      }
      /* Stylez et fixez le bouton sur la page */
      .open-button {
      background-color: #1c87c9;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      opacity: 0.8;
      position: fixed;
      }
      /* Positionnez la forme Popup */
      .login-popup {
      position: relative;
      text-align: center;
      width: 100%;
      }
      /* Masquez la forme Popup */
      .form-popup {
      display: none;
      position: fixed;
      left: 45%;
      top:5%;
      transform: translate(-45%,5%);
      border: 2px solid #666;
      z-index: 9;
      }
      /* Styles pour le conteneur de la forme */
      .form-container {
      max-width: 300px;
      padding: 20px;
      background-color: #fff;
      }
      /* Largeur complète pour les champs de saisie */
      .form-container input[type=text], .form-container input[type=password] {
      width: 100%;
      padding: 10px;
      margin: 5px 0 22px 0;
      border: none;
      background: #eee;
      }
      /* Quand les entrées sont concentrées, faites quelque chose */
      .form-container input[type=text]:focus, .form-container input[type=password]:focus {
      background-color: #ddd;
      outline: none;
      }
      /* Stylez le bouton de connexion */
      .form-container .btn {
      background-color: #8ebf42;
      color: #fff;
      padding: 12px 20px;
      border: none;
      cursor: pointer;
      width: 100%;
      margin-bottom:10px;
      opacity: 0.8;
      }
      /* Stylez le bouton pour annuler */
      .form-container .cancel {
      background-color: #cc0000;
      }
      /* Planez les effets pour les boutons */
      .form-container .btn:hover, .open-button:hover {
      opacity: 1;
      }
    </style>
  </head>
  <body>
    <h2>Forme Popup</h2>
    <p>Cliquez sur le bouton "Ouvrir la forme" pour ouvrir la forme Popup.</p>
    <div class="open-btn">
      <button class="open-button" onclick="openForm()"><strong>Ouvrir la forme</strong></button>
    </div>
    <div class="login-popup">
      <div class="form-popup" id="popupForm">
        <form action="/action_page.php" class="form-container">
          <h2>Veuillez vous connecter</h2>
          <label for="email">
          <strong>E-mail</strong>
          </label>
          <input type="text" id="email" placeholder="Votre Email" name="email" required>
          <label for="psw">
          <strong>Mot de passe</strong>
          </label>
          <input type="password" id="psw" placeholder="Votre Mot de passe" name="psw" required>
          <button type="submit" class="btn">Connecter</button>
          <button type="button" class="btn cancel" onclick="closeForm()">Fermer</button>
        </form>
      </div>
    </div>
    <script>
      function openForm() {
        document.getElementById("popupForm").style.display="block";
      }
      
      function closeForm() {
        document.getElementById("popupForm").style.display="none";
      }
    </script>
  </body>
</html>

Comment Définir des Formes Popup Multiples sur Une Page

Il n'est pas difficile à avoir plusieurs Formes Popup. Utilisez l'attribut global data-*. L'attribut data-* est utilisé pour garder les données personnalisées privées à la page. Ici, nous utilisons l'attribut data-modal.

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      /* Boîte Popup */
      /* Le Modal (l'arrière-plan) */
      .modal {
      display: none; /* Masqué par défaut */
      position: fixed; /* Rester dans la place */
      z-index: 8888; /* S'asseoir en haut */
      left: 0;
      top: 0;
      width: 100%; /* Largeur complète */
      height: 100%; /* Hauteur complète */
      overflow: auto; /* Activer défilement si nécessaire */
      background-color: rgb(0,0,0); /* Couleur de plan */
      background-color: rgba(0,0,0,0.4); /*  w/ opacité noir*/
      }
      /* Contenu Modal/Boîte*/
      .modal-content {
      background-color: #fefefe;
      margin: 10vh auto; /* 15% d'en haut et centré */
      padding: 20px;
      border: 1px solid #888;
      width: 60%; /* Pouvait être plus ou moins, dépend de la taille de l'écran  */
      }
      @media (min-width: 1366px) {
      .modal-content {
      background-color: #fefefe;
      margin: 10vh auto; /* 15% d'en haut et centré */
      padding: 20px;
      border: 1px solid #888;
      width: 30%; /* Pouvait être plus ou moins, dépend de la taille de l'écran */
      }
      }
      h2, p {
      margin: 0 0 20px;
      font-weight: 400;
      color: #666;
      }
      span{
      color: #666;
      display:block;
      padding:0 0 5px;
      }
      form {
      padding: 25px;
      margin: 25px;
      box-shadow: 0 2px 5px #f5f5f5; 
      background: #eee; 
      }
      input, textarea {
      width: calc(100% - 18px);
      padding: 8px;
      margin-bottom: 20px;
      border: 1px solid #1c87c9;
      outline: none;
      }
      .contact-form button {
      width: 100%;
      padding: 10px;
      border: none;
      background: #1c87c9; 
      font-size: 16px;
      font-weight: 400;
      color: #fff;
      }
      button:hover {
      background: #2371a0;
      }    
      /* Le bouton Fermer */
      .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      }
      .close:hover,
      .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
      }
      button.button {
      background:none;
      border-top:none;
      outline: none;
      border-right:none;
      border-left:none;
      border-bottom:#02274a 1px solid;
      padding:0 0 3px 0;
      font-size:16px;
      cursor:pointer;
      }
      button.button:hover {
      border-bottom:#a99567 1px solid;
      color:#a99567;
      }
    </style>
  </head>
  <body>
    <h2>Formes Popup Multiples</h2>
    <p>
      <button class="button" data-modal="modalOne">Contacter nous</button>
    </p>
    <p>
      <button class="button" data-modal="modalTwo">Envoyer un formulaire de plainte</button>
    </p>
    <div id="modalOne" class="modal">
      <div class="modal-content">
        <div class="contact-form">
          <a class="close">&times;</a>
          <form action="/">
            <h2>Contacter Nous</h2>
            <div>
              <input class="fname" type="text" name="name" placeholder="Nom">
              <input type="text" name="name" placeholder="Email">
              <input type="text" name="name" placeholder="Nombre de téléphone">
              <input type="text" name="name" placeholder="Site Web">
            </div>
            <span>Message</span>
            <div>
              <textarea rows="4"></textarea>
            </div>
            <button type="submit" href="/">Envoyer</button>
          </form>
        </div>
      </div>
    </div>
    </div>
    <div id="modalTwo" class="modal">
      <div class="modal-content">
        <div class="contact-form">
          <span class="close">&times;</span>
          <form action="/">
            <h2>Formulaire de plainte</h2>
            <div>
              <input class="fname" type="text" name="name" placeholder="Nom">
              <input type="text" name="name" placeholder="Email">
              <input type="text" name="name" placeholder="Nombre de téléphone">
              <input type="text" name="name" placeholder="Site Web">
            </div>
            <span>Message</span>
            <div>
              <textarea rows="4"></textarea>
            </div>
            <button type="submit" href="/">Envoyer</button>
          </form>
        </div>
      </div>
    </div>
    <script>
      var modalBtns = [...document.querySelectorAll(".button")];
      modalBtns.forEach(function(btn){
        btn.onclick = function() {
          var modal = btn.getAttribute('data-modal');
          document.getElementById(modal).style.display = "block";
        }
      });
      
      var closeBtns = [...document.querySelectorAll(".close")];
      closeBtns.forEach(function(btn){
        btn.onclick = function() {
          var modal = btn.closest('.modal');
          modal.style.display = "none";
        }
      });
      
      window.onclick = function(event) {
        if (event.target.className === "modal") {
          event.target.style.display = "none";
        }
      }
    </script>
  </body>
</html>

Trouvez-vous cela utile?

Articles Associées