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

A voir également

Publié par Oumbra.

DataGrid extJS évoluée

Créez facilement une bannière animée en jquery !

Ajouter un commentaire

Commentaires

Afficher les 8 commentaires