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 :)