Personnaliser une fenêtre en Javascript (tuto de Oumbra)

zakod 32 Messages postés dimanche 12 juin 2016Date d'inscription 6 novembre 2017 Dernière intervention - 6 nov. 2017 à 12:57 - Dernière réponse : jordane45 20553 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention
- 6 nov. 2017 à 14:13
Bonjour

Merci Oumbra pour ce tuto. Je cherche à tester ton code. Mais je suis débutant, je n'ai pas tout compris. En tout cas, ça ne marche pas. J'ai juste le bouton Alert Popup qui s'affiche, quand on clique dessus il se colore en bleu, et rien d'autre.
J'ai mis en commentaire tout ce qui concernait les images (2 lignes dans le JS, une dans le CSS).

Pour aider à comprendre ce qui ne va pas, voici le collage que j'ai fait de ton code :

<!DOCTYPE html>
<html>
  <head>
    <title>personnalisation boite de dialogue</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style_bwat.css" type="text/css"/>

    <script type="text/javascript">


//On déclare la fonction qui va redésigner l'alerte de base en testant s'il s'agit bien d'une fenêtre alert() 
    window.alert = function(alertMessage)
     {
//On définit 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>"; voulu
  //alertBox  +="<img src=\"gfx/footer00.png\" class=\"bottom\">";
  alertBox+="</div>";

//On crée la boite de dialogue, on y affecte un entête, un contenu, on y insère le message 
  var Alertpanel = document.getElementById("alertPanel"); // On sélectionne le div alertPanel déjà 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()   //Onclick du bouton du div
  {
  var alertBox =  document.getElementById("alertPanel"); // On sélectionne le div présent dans la page et rempli par nos soins 
  alertBox.innerHTML =""; // Et on le vide de son contenu
  }
//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. -->

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


La console me donne un message : TypeError: Alertpanel is null

Pour l'instant, je voudrais déjà voir arriver la fenêtre perso ! Alors, pour les choses que je ne comprends pas, on verra plus tard, mais en voici juste une : jusqu'à présent, pour moi, un "input", c'était dans un formulaire. Est-ce qu'on peut s'en servir, hors d'un formulaire, pour les zones de saisie basiques text, textarea, number, etc.?
Afficher la suite 

1 réponse

Répondre au sujet
jordane45 20553 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 6 nov. 2017 à 14:13
0
Utile
Bonjour,


Tu fais appel à du JS alors que la page (et les éléments qui la composent...) ne sont pas encore chargé.
C'est pour ça qu'il est préférable de toujours mettre ses JS à la fin (juste avant le /body )

<!DOCTYPE html>
<html>
  <head>
    <title>personnalisation boite de dialogue</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style_bwat.css" type="text/css"/>
</head>
<body>
    <input type="button" value="Alert Popup" onclick="javascript:alert('Ceci est une alerte personnalisée');" /> <!--- Bouton pour appeler la fonction -->
    <div id="alertPanel" ></div> <!-- Div vide -->
	
	
	<script type="text/javascript">
		//On déclare la fonction qui va redésigner l'alerte de base en testant s'il s'agit bien d'une fenêtre alert() 
		window.alert = function(alertMessage)
		{
		    //On définit 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>"; 
		    //alertBox  +="<img src=\"gfx/footer00.png\" class=\"bottom\">";
		    alertBox+="</div>";

            //On crée la boite de dialogue, on y affecte un entête, un contenu, on y insère le message 
		    var Alertpanel = document.getElementById("alertPanel"); // On sélectionne le div alertPanel déjà 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() //Onclick du bouton du div
		{
            var alertBox =  document.getElementById("alertPanel"); // On sélectionne le div présent dans la page et rempli par nos soins 
            alertBox.innerHTML =""; // Et on le vide de son contenu
		}
		
		function HideFond()  //Onclick du bouton du div
		{
			//...
		
		}
		
		//On peut bien évidement appeler la fonction sans bouton 
		 alert('Boite de dialogue,<br>sans evennement onclick !');

    </script>
	
</body>
</html>

Commenter la réponse de jordane45

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.