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()
On définie une variable dans laquelle on va stocker un Div (ce qui deviendra la boite de dialogue)
On Crée notre Boite de dialogue, on lui affecte une entete, un contenu, on lui insert le message
Fonction pour fermer la fenêtre de dialogue après l'évenement
On peut bien évidement appeler la fonction sans bouton
ETAPE 2 : Ajout de l'élément maître du script.
Toujours dans le HTML:
ETAPE 3 : Le CSS :
A placer en debut de la page Html :
le contenu du fichier css
Voila le tour est joué :)
Merci et à bientot :)
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
- Javascript boite de dialogue personnalisée
- Personnaliser alert javascript - Meilleures réponses
- Alert html - Meilleures réponses
- Javascript : Personnaliser les boîtes de dialogue - CodeS SourceS - Guide
- Javascript boite de dialogue formulaire - Guide
- Javascript : Boite de dialogue - CodeS SourceS - Guide
- Javascript : Boite de dialogue (avec grisement de la page) - CodeS SourceS - Guide
- Javascript : Boite de dialogue modale de sélection d'une liste d'icones - CodeS SourceS - Guide