Publié le 21/05/2010
Auteur fobec
Réseaux sociaux
0 partages
0 tweets
0 plus
3 commentaires

Afficher un popup : message, confirmation ou invite de saisie

Dans un page internet, une boîte de dialogue est une fenêtre qui s'affiche au premier plan pour communiquer à l'internaute. Il existe trois types de fenetre que l'on peut afficher en Javascript: l'avertissement, le choix et la saisie d'un texte.

Les boîtes de dialogue en Javascript

Javascript dispose de 3 types de popup ou boite de dialogue pour communiquer avec l'internaute:
alert(): le message d'alerte,
confirm(): la boite de confirmation,
prompt(): la fenêtre de saisie.

Pour ces 3 fonctions, le saut à la ligne s'obtient en insérant n dans le texte affiché.
Exemple: alert("premiere ligne n deuxieme ligne");

Le message d'alerte

La fonction alert() affiche un message à l'utilisateur en général pour communiquer une information ou signaler une erreur.

<html>
    <head>
        <script type="text/javascript">
            function showError()
            {
                alert("La valeur saisie n'est pas valide !!!");
            }
        </script>
    </head>
    <body>
        <input type="button" onclick="showError()" value="Signaler une erreur">
    </body>
</html>

Le boite de confirmation

La fonction confirm() affiche une boite de dialogue de confirmation. L'utilisateur a le choix entre OK et annuler.

<html>
    <head>
        <script type="text/javascript">
            function showConfirm()
            {
                var answer=confirm("Continuer l'operation en cours ?");
                if (answer==true)
                {
                    alert("Vous avez clique sur OK");
                }
                else
                {
                    alert("Vous avez clique sur Annuler");
                }
            }
        </script>
    </head>
    <body>
        <input type="button" onclick="showConfirm()" value="Proposer le choix" />
    </body>
</html>

La fenetre de saisie

La fonction prompt() permet de saisir une valeur, le premier paramètre est l'invite à saisir du texte, le deuxième paramètre propose un texte par défaut.

<html>
    <head>
        <script type="text/javascript">
            function showPrompt()
            {
                var answer=prompt("Identification, veuillez saisir votre prenom","mon prenom");
                if (answer!=null && answer!="")
                {
                    alert("Votre prenom est :"+answer);
                } else {
                    alert("Operation interrompue")
                }
            }
        </script>
    </head>
    <body>
        <input type="button" onclick="showPrompt()" value="Saisir mon prenom" />
    </body>
</html>


Si l'on souhaite personnaliser le graphisme des boites de dialogue, les lightbox sont également un bon choix. La fenêtre sera également affichée en premier plan à l'internaute et le contenu pourra être personnaliser à souhait par exemple avec un formulaire de saisie.

Ajouter un commentaire

Les champs marqués d'un * sont obligatoires, les adresses emails se sont pas publiées.
avatar robbie

Publié par robbie

le 27/08/2011 à 17:43:02

marche pas le code le la boite de confirmation
faut-il inclure: { dans le code ou les enlever? merci d'avance pour la reponse (si possible pas par mail merci)

avatar robbie

Publié par robbie

le 27/08/2011 à 17:44:46

desole pour le message en multiple j'ai eu un ptit beug

avatar Quentin

Publié par Quentin

le 17/01/2012 à 17:01:59

Merci pour ces petits codes java script qui me sont d'un grand secours pour mon TP :)

A lire aussi

Réseaux sociaux
Présentation de l'article
Catégorie
tuto - webmaster
Mise a jour
21/05/2010
Visualisation
vu 7614 fois
Public
Internaute
Auteur de la publication
Fobec
Admin
Auteur de 261 articles
|BIO_PSEUDO|
Commentaires récents

Publié par fobec dans logiciel

MAJ: mise en cache du FAI et optimisation du script de Geolocalisation.

Publié par deefaze dans CMS

R := Byte(Color);
G := Byte(Color shr 8);
B := Byte(Color shr 16);

Publié par Roger HENRI dans CMS

Je ne suis pas sûr que cette procédure marche toujours parfaitement à cause du mot
"selstart" qui, chez moi au moins, paraît être capricieux.

Quand je veux lire sa valeu...

Publié par Fobec dans logiciel

L'api ip to RIR est compatible avec les adresses IP au format ipV6

Publié par Franzi dans java

Bonjour,
Le code est simple et compile, après être entré dans public void connect, il n'effectue pas this.session.get.transport et s'arrête. Sous eclipse avec Tomcat, j'ob...