Sujet Précédent Sujet Suivant

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

zakod Messages postés 32 Date d'inscription dimanche 12 juin 2016 Statut Membre Dernière intervention 6 novembre 2017 - Modifié le 6 nov. 2017 à 12:58
jordane45 Messages postés 37532 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2023 - 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.?

1 réponse

Réponse 1 / 1
jordane45 Messages postés 37532 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 juin 2023 341
6 nov. 2017 à 14:13
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>

0
Rejoignez-nous