javascript Boîte de dialogue personnalisée avec JS

[mikadox]

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 !

 

[DaCode]

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]

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

 <button id="custom-alert-box-button">Cliquez pour afficher une boîte d'alerte</button>

Le code CSS du bouton

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

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.

 

[mikadox]

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

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);
}

 

[WWWest]

Est-ce que le code JS isolé est complet ?

Ben si ça ne fonctionne pas probablement pas...
Tu oublies la moitié du code Anthony, si tu rajoutes l'extrait de code que mikadox a isolé là ça fonctionne

 

[mikadox]

Merci pour la précision, j'avais trouvé entre-temps, ça fonctionne parfaitement.

 

[mamz]

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 !

 

[mikadox]

Salut mamz, quelle est ta question ?

 

[Victorinox]

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.

<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).

 .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 !

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

 

[DaCode]

Well done Victorinox !
C'est un peu plus clair et compréhensible que le Codepen.

Merci pour le partage