Personnalisation d'une fenêtre alert()
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 :)
- Personnaliser alert javascript
- Javascript boîte de dialogue personnalisée - Meilleures réponses
- Alert css - Meilleures réponses
- Récupérer données json (javascript) - Conseils pratiques -Javascript
- Poo javascript - Conseils pratiques -Javascript
- Base de données javascript - Conseils pratiques -Javascript
- Javascript redirect ✓ - Forum PHP
- Fichier javascript - Conseils pratiques -Javascript