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 9899 fois
Public
Internaute
Auteur de la publication
Fobec
Admin
Auteur de 263 articles
|BIO_PSEUDO|
Commentaires récents

Publié par Fobec dans php5

Bonjour,
vous pouvez poster un message sur le forum, la communaut vous donnera un coup de main pour la mise en place du script.

Publié par dotnet dans php5

Cette interface est intéressant par le fait qu'elle soit universelle, donc son intérêt pour moi est qu'elle permet l'accès aux bases de données Microsoft SQL Server....

Publié par ric dans CMS

c\'est la première fois que j\'utilise ce logiciel

Publié par Juslin dans java

Ca tombe bien et merci.

Publié par Fobec dans tuto

Les liens vers les feuilles de style sont definis dans le template. L'emplacement sur le FTP depend du CMS utilise, par exemple sous WordPress les fichiers sont dans le dossier '/wpcontent/themes'