javascript Boîte de dialogue personnalisée avec JS

mikadox

Membre
Salut je reviens à la charge avec une question sur les boîtes de dialogue qui s'ouvre avec la commande alerte() en JS.
Est-il possible de les personnaliser, en dimensions, couleur et position sur la page web ?

Suivant les navigateurs elles ne s'affichent pas de la même façon donc je voudrais formaliser un peu tout ça.
Thanks !
 
  Solution
Yep !

Je vous propose un code un peu plus léger pour afficher une boîte de dialogue modale sur votre site.
On appelle un élément modal un élément qui prend le contrôle total de l'écran et du clavier : c'est à dire que vous aurez l'obligation de la fermer par un clic bouton en général avant de pouvoir faire autre chose.

Ces boîtes de dialogue sont utiles pour afficher des avertissements importants, pour afficher une question à laquelle on répond par un clic sur des bouton oui ou non, de la publicité (mauvaise idée à mon avis) ou encore d'autres directives à afficher.

Il ne faut pas en abuser sur vos sites cela devient très pénible si plusieurs s'affichent lors de la navigation.

Le code HTML est assez simple, on déclare le bouton qui...

DaCode

Membre
Hello mikadox, je ne suis pas spécialiste mais j'ai trouvé ça sur Codepen, ça devrait t'aider
(attention les boîtes de dialogue classiques s'ouvrent dans cette fenêtre mais les boîtes de dialogue personnalisées s'ouvrent dans la fenêtre Codepen)

 

Anthony

Membre
Pour y voir un peu plus clair, j'isole le code (HTML, CSS, JS) d'une des boîtes de dialogues, la quatrième.

Donc ici le code HTML qui concerne le bouton Cliquez pour afficher une boîte d'alerte
HTML
 <button id="custom-alert-box-button">Cliquez pour afficher une boîte d'alerte</button>
Le code CSS du bouton
CSS
button {
    background-color: #0090c5;
    border: none;
    padding: 1em;
    color: white;
    margin: 1em;
    border-radius: 5px;
}
Et enfin le code Javascript de la boîte de dialogue
JavaScript
var modalContainer = document.createElement('div');
modalContainer.setAttribute('id', 'modal');

var customBox = document.createElement('div');
customBox.className = 'custom-box';

// Affichage boîte d'alerte
document.getElementById('custom-alert-box-button').addEventListener('click', function() {
    customBox.innerHTML = '<p>Je suis une boîte d\'alerte customisée !</p>';
    customBox.innerHTML += '<button id="modal-close">OK</button>';
    modalShow();
});

Est-ce que le code JS isolé est complet ?
Parce que cela ne fonctionne pas dans JSFiddle.

 
Dernière édition:

mikadox

Membre
Pour y voir un peu plus clair, j'isole le code (HTML, CSS, JS) d'une des boîtes de dialogues, la quatrième.
Merci Anthony, j'ai un peu de mal aussi à savoir quel code est impliqué avec quelle boîte de dialogue précisément.

Notamment ce code
JavaScript
function modalShow() {
    modalContainer.appendChild(customBox);
    document.body.appendChild(modalContainer);

    document.getElementById('modal-close').addEventListener('click', function() {
        modalClose();
    });

    if (document.getElementById('modal-confirm')) {
        document.getElementById('modal-confirm').addEventListener('click', function () {
           console.log('Confirmé !');
           modalClose();
        });
    } else if (document.getElementById('modal-submit')) {
        document.getElementById('modal-submit').addEventListener('click', function () {
            console.log(document.getElementById('modal-prompt').value);
            modalClose();
        });
    }
}

function modalClose() {
    while (modalContainer.hasChildNodes()) {
        modalContainer.removeChild(modalContainer.firstChild);
    }
    document.body.removeChild(modalContainer);
}
 
Yep !

Je vous propose un code un peu plus léger pour afficher une boîte de dialogue modale sur votre site.
On appelle un élément modal un élément qui prend le contrôle total de l'écran et du clavier : c'est à dire que vous aurez l'obligation de la fermer par un clic bouton en général avant de pouvoir faire autre chose.

Ces boîtes de dialogue sont utiles pour afficher des avertissements importants, pour afficher une question à laquelle on répond par un clic sur des bouton oui ou non, de la publicité (mauvaise idée à mon avis) ou encore d'autres directives à afficher.

Il ne faut pas en abuser sur vos sites cela devient très pénible si plusieurs s'affichent lors de la navigation.

Le code HTML est assez simple, on déclare le bouton qui va servir à afficher la boîte de dialogue puis le contenu de la boîte elle-même.
HTML
<button class="example">Cliquez ici pour ouvrir la boîte de dialogue modale</button> <!-- bouton HTML -->
<div class="modal"> <!-- boîte de dialogue -->
    <div class="modal-content"> <!-- contenu de la boîte de dialogue -->
        <span class="close-button">&times;</span>
        <h2>Ceci est une boite de dialogue modale</h2>
    </div>
</div>

On met un peu en forme en CSS, là vous faites selon vos besoins, selon le style de votre site.
Ici le style est... clinique.

Notez lignes 35 à 40 qui stylisent la page lorsque la boîte de dialogue sera ouverte. Ici on applique un voile opaque au viewport (fenêtre du navigateur).
CSS
 .modal {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #cccccc;
      opacity: 0;
      visibility: hidden;
      transform: scale(1.1);
      transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
      }
      .modal-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #eeeeee;
      padding: 1rem 1.5rem;
      width: 24rem;
      border-radius: 0.5rem;
      }
      .close-button {
      float: right;
      width: 1rem;
      line-height: 1.5rem;
      text-align: center;
      cursor: pointer;
      border-radius: 30px;
      background-color: #eeeeee;
      }
      .close-button:hover {
      background-color: #adadad;
      }
      .show-modal {
      opacity: 1;
      visibility: visible;
      transform: scale(1.0);
      transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
      }

Enfin on applique du code JavaScript pour animer tout ça !
JavaScript
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".example");
var closeButton = document.querySelector(".close-button");
    
function toggleModal() {
    modal.classList.toggle("show-modal");
}
    
function windowOnClick(event) {
    if (event.target === modal) {
        toggleModal();
    }
}
    
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

Voilà vous avez une boîte de dialogue personnalisée sur votre site.
Vous pouvez tester ce code en local ou sur VSCode avec le goLive activé ;)

Le code global peut-être englobé dans un seul fichier HTML, avec les balises <style> pour le CSS et <script> pour le JavaScript, un exemple est en PJ de ce message.
A+

Le code en fonction sur JSFiddle
 

Pièces jointes

  • modal-box.zip
    870 bytes · Affichages: 1

Ces discussions pourraient vous intéresser...

Hello, je cherche à indenter la première ligne de chaque paragraphe d'un long texte. Alors je me suis lancé dans du bricolage avec des margin-left sur des span mais au niveau html c'est pas très beau. <span class="retrait_20">Il</span><span>était une fois une princesse dans...
  • Résolue
Salut, J'ai une erreur PHP que je n'arrive pas à résoudre, voici le code simplifié <!DOCTYPE html> <html> <head> <title>Cours PHP & MySQL</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body>...
  • Résolue
Hello, Je voulais tester un peu node.JS et je l'ai donc installé sur mon Win 10, l'installation s'est bien passé. Par contre quand j'essaie de faire tourner un petit code simple qui permet de créer un serveur, je l'ai enregistré sous serveur.js var http = require('http')...
Haut