Modale JavaScript personnalisées

Les modales personnalisées en JavaScript, conçues pour imiter les boîtes de dialogue natives telles que `alert`, `confirm` et `prompt`, offrent un contrôle total sur l'apparence et le comportement, permettant des expériences utilisateur plus riches et cohérentes.

NOTE : Vous pouvez utiliser les code source de cette page pour des raisons personnelles ou professionnelles sans besoin de me citer.

_alert

Affiche une boîte de dialogue d'alerte avec un message d'information.

• Cliquer sur "OK" ou en appuyant sur la touche "Entrée" : renvoi undefined
• Cliquer en dehors de la fenêtre ou en appuyant sur la touche "Échap" : renvoi undefined

_confirm

Affiche une boîte de dialogue de confirmation avec des options "OK" et "Annuler".

• Cliquer sur "OK" ou en appuyant sur la touche "Entrée" : renvoi true
• Cliquer en dehors de la fenêtre ou en appuyant sur la touche "Échap" : renvoi false

_prompt

Affiche une boîte de dialogue avec une invite de saisie permettant à l'utilisateur de fournir une réponse.

• Cliquer sur "OK" ou en appuyant sur la touche "Entrée" : renvoi le texte entré par l'utilisateur, attention, si l'utilisateur ne met rien, renvoi un texte vide <empty string>
• Cliquer en dehors de la fenêtre ou en appuyant sur la touche "Échap" : renvoi null

_promptPlus

Exemples d'utilisation du code

Il suffit de faire comme les fonctions natives, en rajoutant await devant et en préfixant d'un underscore

        document.getElementById("testAlert").onclick = async function() {
              console.log(await _alert(`Bonjour tout le monde !`))
        }

        document.getElementById("testConfirm").onclick = async function() {
              console.log(await _confirm(`Voulez-vous confirmer ce choix ?`))
        }

        document.getElementById("testPrompt").onclick = async function() {
              console.log(await _prompt(`Quel est votre prénom ?`))
        }

        document.getElementById("testPrompt2").onclick = async function() {
              if((await _promptPlus({label:`Quel est votre âge ?`, type:'number', value:'16', placeholder:"Indiquez votre âge ici..." }) < 18 ))
              await _alert("Vous êtes mineur(e).")
              else
              await _alert("Vous êtes majeur(e).")
        }
    

Obtenir le code

Ouvrez le code source de cette page et copiez le contenu de la balise script qui a pour id CODE_A_COPIER

Remarque : le style CSS est contenu dans le code JavaScript