begin process at 2012 05 30 10:54:32
  Trouver un code source :
 
dans
 
Accueil > 

Tutoriels

 > 

Fenêtre & Pop-up

 > PERSONNALISATION D'UNE FENÊTRE ALERT()

PERSONNALISATION D'UNE FENÊTRE ALERT()


 Information sur le tutoriel

Note :
Aucune note

 Description

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û aidé certaine personne :)

Tutorial

Tout d'abord j'ai fait ce petit tuto car j'ai moi même eu du mal à me renseigné et a trouver des tutos simple 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 super flux 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: ETAPE 2 : Ajout de l'élément maître du script. Toujours dans le HTML: ETAPE 3 : Le CSS :o A placer en debut de la page Html : Alert Perso 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 :)

 Historique

09 février 2010 23:52:22 :
Première fois, premier tuto :)

Commentaires

Commentaire de Oumbra le 10/02/2010 00:23:53

gros problème d'affichage et je ne sais pas comment le modifier :(

Commentaire de Oumbra le 11/02/2010 21:31:14

Tout d'abord j'ai fait ce petit tuto car j'ai moi même eu du mal à me renseigné et a trouver des tutos simple 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 super flux 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:

<script language="javascript">
window.alert = function(alertMessage)// On  declare la fonction qui va redesigner l'alerte de base en testant s'il s'agit bien d'une fenêtre alert()
{
    var alertBox = ""; // On définie une variable dans laquelle on va stocker un Div  (ce qui deviendra la boite de dialogue)
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
}

function closeAlert() // Fonction pour fermer la fenêtre de dialogue après l'évenement 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 !');
</script>


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

Toujours dans le HTML:

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


ETAPE 3 :  Le CSS :o

A placer en debut de la page Html :

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

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

Commentaire de Oumbra le 11/02/2010 21:32:17

J'espère que cette nouvelle vu va vous aider

Commentaire de jdmcreator le 18/02/2010 23:50:06

Ce n'est pas vraiment un tutoriel, c'est plutôt un script commenté

Commentaire de Matt67 le 06/03/2010 19:56:25

Bonsoir,

Un script commenté qui n'apporte pas grand chose. Je ne vois pas trop l'interet de ce genre de source !!!
Que voit on ? Appel de fonctions quand on clique sur un bouton puis un innerHTML. Ouais, bof.
Pour les boutons, il y a la balise <button>. On peut aussi créer les éléments avec des document.createElement, etc...
A modifier et à améliorer...

Matt...

Commentaire de jdmcreator le 09/03/2010 03:11:50

Essaye de refaire ton tutoriel mais en utilisant un autre navigateur web, comme Firefox ;) Cela ne fonctionne pas pour certains browser ;)

Commentaire de kazma le 20/08/2010 00:14:37 administrateur CS

sa aurait ete bien de mettre une adresse afin de voir ce que sa donne car il n'y a pas les images et en plus j'ai pas reussi a faire fonctionner le script

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,265 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales