1. Accueil
  2. Tutoriels
  3. Javascript

Personnalisation d'une fenêtre alert()

Dernière mise à jour le par @karamel .

Deux petits fichiers pour résoudre le problème de personnalisation d'une fenêtre alert().

Script commenté et facile d'approche, bon courage.

En espérant avoir pû aider certaines personnes :).

Tout d'abord j'ai fait ce petit tuto car j'ai moi même eu du mal à me renseigner et à trouver des tutos simples pour ce sujet.

Je vous propose un petit script de deux fichiers seulement (quarante lignes chacun).

Comment ? Et bien c'est simple en épurant le superflu et en préservant l'essentiel.

Je vous propose donc mes scripts entièrement commentés.

Bonne lecture à tous !!

ETAPE 1 : Le javascript compris dans la page html.

A placer dans la page HTML:

On declare la fonction qui va redesigner l'alerte de base en testant s'il s'agit bien d'une fenêtre alert()

window.alert = function(alertMessage)
{

On définie une variable dans laquelle on va stocker un Div (ce qui deviendra la boite de dialogue)

var alertBox = "";
alertBox+="<div class=\"MsgAlert\">"; 
alertBox  +="<img src=\"gfx/header_err.gif\" class=\"header\">"; 
alertBox  +="<center><p><br>"+alertMessage+"</p>"; 
alertBox  +="<input type=\"submit\' value=\"\" onclick=\"closeAlert();HideFond();\" /></center>"; voulut
alertBox  +="<img src=\"gfx/footer00.png\" class=\"bottom\">";
alertBox+="</div>";

On Crée notre Boite de dialogue, on lui affecte une entete, un contenu, on lui insert le message

var Alertpanel = document.getElementById("alertPanel"); // On selection le div alertPanel deja présent dans la page (mais vide)
Alertpanel.innerHTML = alertBox; // On le remplit de notre div
Alertpanel.focus(); // On lui donne le focus
}

Fonction pour fermer la fenêtre de dialogue après l'évenement

function closeAlert()   //Onclick du bouton du div
{
var alertBox =  document.getElementById("alertPanel"); // On selection le div present dans la page et remplit par nos soins 
alertBox.innerHTML =""; // Et on le vide de son contenue
}

On peut bien évidement appeler la fonction sans bouton

alert('Boite de dialogue,<br>sans evennement onclick !');

ETAPE 2 : Ajout de l'élément maître du script.

Toujours dans le HTML:

</head>
<body>
    <input type="button" value="Alert Popup" onclick="alert('Ceci est une alerte personnalisé')" /> <!--- Bouton pour appeler la fonction -->
    <div id="alertPanel" ></div> <!-- Div vide -->
</body>
</html>

ETAPE 3 : Le CSS :

A placer en debut de la page Html :

<head>
    <title>Alert Perso</title>
    <link href="le_fichier.css" rel="stylesheet" type="text/css">

le contenu du fichier css

.MsgAlert
{
left:40%;
top:40%;
position:relative;
width:200px;
background:url(gfx/content00.gif) repeat-y;
cursor:default;
}

.header
{
 margin-top:-20%;
} 

.bottom 
{
margin-top:3%;
}

.MsgAlert p 
{
margin-top: 0%; 
font-family:Arial; 
font-size:14px;
 text-align:center; 
color:white; 
padding-left:10px; 
padding-right:10px;
} 

.MsgAlert input 
{
margin-top: 3%;
border:none;
height:24px;
width:80px;
background:url(gfx/boutton_valider.gif);
cursor: pointer;
}

.MsgAlert input:hover 
{
margin-top: 3%;
border:none;
height:24px;
width:80px;
background:url(gfx/boutton_valider_hover.gif);
cursor:pointer;
}

Voila le tour est joué :)

Merci et à bientot :)

A voir également
Ce document intitulé « Personnalisation d'une fenêtre alert() » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
8 Commentaires