| Accueil | table JavaScript | index JavaScript | précédent | suivant |

Les boîtes Popup JavaScript

JavaScript fournit trois boîtes de dialogue standard que les divers événements peuvent afficher (l'aspect des boîtes varie d'un navigateur à l'autre) :

alert("texte") boîte à un bouton (OK) permettant d'envoyer un message d'alerte
confirm("texte") boîte à deux boutons (OK et Annuler). Retourne true si le visiteur choisit OK, false s'il choisit Annuler
prompt("texte") boîte à deux boutons et un champ de saisie. Si le visiteur choisit OK, la boîte retourne le contenu du champ, s'il choisit Annuler, elle retourne null

Voici un script qui montre l'emploi de ces diverses boîtes :


/* feuille de style Jstyle06 */

#style_titre
{
font-size : 12pt;
color : rgb(80,0,0);
text-align : center;
font-weight : bold;
margin-top : 10px;
margin-bottom : 10px;
}

.texte1
{
margin-top : 10px;
margin-bottom : 0px;
margin-left: 20px;
color : rgb(150,20,20);
}

.texte2
{
margin-top : 10px;
margin-bottom : 0px;
margin-left: 20px;
color : rgb(0,100,0);
text-decoration : underline;
}

#formulaire
{
overflow : auto;
height : 200px;
background-color : rgb(255,255,255);
margin-top : 10px;
margin-left: 20px;
margin-right : 20px;
margin-bottom : 10px;
scrollbar-face-color : rgb(255,245,230);
}

#message
{
overflow : auto;
height : 30px;
padding-top : 10px;
padding-left : 20px;
padding-right : 20px;
background-color : rgb(255,255,255);
color : rgb(200,0,0);
margin-top : 10px;
margin-left: 20px;
margin-right : 20px;
scrollbar-face-color : rgb(255,245,230);
}

#cadre1
{
position : absolute;
top : 10px;
left : 250px;
width : 500px;
background-color : rgb(255,245,230);
font-family : Verdana;
font-size : 10pt;
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple14</title>
<meta name="description" content="Phrase décrivant clairement cette page" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="Jstyle06.css" />

<script type="text/javascript">
function check()
{
var error=false;
var champs=document.getElementsByTagName("input");
if(champs[0].value == "")
{

error=true;
alert("vos nom et prénom SVP !");

}
if((champs[1].value == "") &&(! error))
{

error=true;
alert("veuillez fournir la date SVP !");

}
if(error)
{return false;}
else
{

if(confirm("confirmez-vous l'envoi ?"))
{return true;}
else
{return false;}

}
}

function info(x)
{
var messageField=document.getElementById("message");
messageField.innerHTML=x;
}

function bonus()
{
var messageField=document.getElementById("message");
messageField.innerHTML="";
var promo=prompt("entrez votre code promotionnel");
if(promo != null)
{

var code="votre code : ".concat(promo);
messageField.innerHTML=code;
if(! confirm("confirmez votre code"))
{messageField.innerHTML="code annulé";}
else
{messageField.innerHTML="votre code a bien été enregistré";}

}
}
</script>

</head>

<body>
<!-- Jscript14 -->

<div id="cadre1">
<div id="style_titre">Boîtes d'alerte</div>
<div id="message">
</div>
<div id="formulaire">
<form class="texte1" action="Jscript14bis.html" method="post" onsubmit="return check()">
<input type="text" name="champ1" size="20" maxlength="20" value=""
onmouseover="info('Nom et prénom obligatoires')" onmouseout="info('')"/> nom et prénom<br/><br/>
<input type="text" name="champ2" size="20" maxlength="20" value=""
onmouseover="info('date sous la form jj/mm/20xx')" onmouseout="info('')"/> date<br/><br/>
<input type="button" name="option" value="option" onclick="bonus()" />
<input type="submit" name="envoi" value="envoi " />
</form>
</div>

</body>
</html>


Afficher cette page



suivant