Discussion :

[Sarah.P]

Bonjour,

Je suis actuellement en train de créer un site internet pour un projet personnel non commercial. N'étant pas du tout dans le domaine informatique "je galère grave".
Voici mon problème :
sur ma page principale et autres j'ai plusieurs boutons "Inscription" permettant aux visiteurs de créer leur compte.
Lorsque l'on clique sur ce fameux bouton celui ouvre une page que j'appelle "PopUpInsciption" à l'aide de JavaScript.
Le bouton situé le plus haut dans mon code fonctionne parfaitement, mais les autres ne répondent pas.
Alors j'ai du créer plusieurs code JS = copier/coller de l'original en changeant les "titres" des fonctions pour vérifier. Figurer vous que tout fonctionne correctement.
Ma question est il y a t-il un moyen d'utiliser les mêmes fonctions JS et donc PopUp ? Car je me retrouve avec tout un tas de ligne de code pour pas grand chose.
Pire encore il y a des JS dans ma PopUp donc vous imaginez le nombre de page + code en "doublon" juste pour une modif de "titre/class" de fonction JS.

On gros je veux plusieurs boutons capablent d'ouvrir 1 seule PopUp. Pour être encore plus caricatural : comparez mes boutons à des chemins menants au même endroit/lieu.
J'espère que quelqu'un à compris mon questionnement et pourra me donner une solution. Merci par avance.

Voici une partie de mon code PHP

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table id="tblacc1">
		<tr>	
			<td id="td0"><a href="abonnements.php" style= "color:white; text-decoration:none;">Abonnements</a></td>
			<td id="td2"><h4>Inscription</h4><hr id="hr2"><br>Remplissez le formulaire d'inscription, créez votre profil et effectuez vos recherches.
                           <div style="text-align:center;">
	                      <?php
                                   echo '<a href="#" data-width="500" data-relinscription2="popupinscription2" class="poplightinscription2">
                                     <div class="boutonSINSCR" style="display:inline-block;" >
                                         Inscription
                                     </div>
                                    </a>
                                    <div id="popupinscription2" class="popup_inscription2">';
                                      include('formulaire inscription.php');
                                   echo'</div>';
                              ?>
                            </div>
                      </td>
             </tr>
</table>

plus bas sur la même page ou même sur une autre page

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table id="tblacc1">
		<tr>	
			<td id="td0"><a href="abonnements.php" style= "color:white; text-decoration:none;">Abonnements</a></td>
			<td id="td2"><h4>Inscription</h4><hr id="hr2"><br>Remplissez le formulaire d'inscription, créez votre profil et effectuez vos recherches.
                           <div style="text-align:center;">
	                      <?php
                                   echo '<a href="#" data-width="500" data-relinscription2="popupinscription2" class="poplightinscription2">
                                     <div class="boutonSINSCR" style="display:inline-block;" >
                                         Inscription
                                     </div>
                                    </a>
                                    <div id="popupinscription2" class="popup_inscription2">';
                                      include('formulaire inscription.php');
                                   echo'</div>';
                              ?>
                            </div>
                      </td>
             </tr>
</table>

Et le .JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
//POPUP inscription
	$('a.poplightinscription').on('click', function() {
		var popID = $(this).data('relinscription');
		var popWidth = $(this).data('width');
 
	$('#' + popID).fadeIn().css({ 'width': ''}).prepend('<a href="#" class="closeinscription" overflow:auto;><img src="images/close.png" class="btn_closeinscription" title="Fermer la fenêtre" alt="Close" /></a>');
	$('#' + popID).fadeIn().css({ 'height': ''}).prepend;
 
	var popMargTop = ($('#').height() + 5) / 2;
	var popMargLeft = ($('#' + popID).width() + 85) / 2;
 
	$('#' + popID).css({ 
	'margin-top' : -popMargTop, 'margin-left' : -popMargLeft
	});
 
	$('body').append('<div id="fadeinscription"></div>');
	$('body').append('<div style="position: fixed;">');
	$('#fadeinscription').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
		return false;
	});
	$('body').on('click', 'a.closeinscription, #fadeinscription', function() {
		$('#fadeinscription , .popup_inscription').fadeOut(function() {
			$('#fadeinscription, a.closeinscription').remove(); 
	}); return false; });
 
//POPUP inscription2					   		   
	$('a.poplightinscription2').on('click', function() {
	var popID = $(this).data('relinscription2'); //Trouver la pop-up correspondante
	var popWidth = $(this).data('width'); //Trouver la largeur
	$('#' + popID).fadeIn().css({ 'width': ''}).prepend('<a href="#" class="closeinscription2" overflow:auto;><img src="images/close.png" class="btn_closeinscription2" title="Fermer la fenêtre" alt="Close" /></a>');
	$('#' + popID).fadeIn().css({ 'height': ''}).prepend;
 
	var popMargTop = ($('#').height() + 5) / 2;
	var popMargLeft = ($('#' + popID).width() + 85) / 2;
	$('#' + popID).css({ 
	'margin-top' : -popMargTop, 'margin-left' : -popMargLeft
	});
 
	$('body').append('<div id="fadeinscription2"></div>');
	$('body').append('<div style="position: fixed;">');
	$('#fadeinscription2').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
	return false;
	});
 
	$('body').on('click', 'a.closeinscription2, #fadeinscription2', function() { 
$('#fadeinscription2 , .popup_inscription2').fadeOut(function() {
			$('#fadeinscription2, a.closeinscription2').remove();
			/*window.location.replace("accueil.php");*/	
	});
	return false;
	});

[SpaceFrog]

PopUp ou PopIn ?

PopUp => target
Popin = .html()

[NoSmoking]

Bonjour,
on notera également que les ID ne sont pas UNIQUEs, par exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<table id="tblacc1">
  <tr>
    <td id="td0">
      <!-- la suite -->

[Sarah.P]

Bonjour,

Je me suis mal exprimée il s'agit de popIn et non de popUp.

Concernant mes ID de table identiques : c'est normal ce sont exactement les mêmes disposées à plusieurs endroits différents de ma page/site.

Merci pour votre retour,

[bonjourajax]

Bonsoir,
notez qu'il faudrait rajouter en haut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(document).ready(function(){

[Sarah.P]

Bonsoir,

En haut de mon fichier .Js j'ai déjà intégrée cette phrase

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

jQuery(function($){

Mon code fonctionne à la base. C'est lorsque j'ai 2 PopIn identiques que ça plante.
Je reviens avec une démo de mon problème.

[Watilin]

Bonjour,
on notera également que les ID ne sont pas UNIQUEs, par exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<table id="tblacc1">
  <tr>
    <td id="td0">
      <!-- la suite -->

Concernant mes ID de table identiques : c'est normal ce sont exactement les mêmes disposées à plusieurs endroits différents de ma page/site.

Eh bien justement non, ce n’est pas normal, c’est ce que voulait dire NoSmoking. Si une même page contient plusieurs fois le même ID, les méthodes de sélection renvoient uniquement le premier élément qui correspond.

Le plus simple est de changer les ID non uniquest en classes, et de remplacer les $('# … ') correspondants par des $('. … ').

J’attire ton attention sur une erreur que nous faisons toutes et tous quand nous débutons en HTML : rajouter des balises à des fins de présentation, plutôt que d’utiliser le CSS. Prenons par exemple ce passage :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<h4>Inscription</h4><hr id="hr2"><br>

Le <br> peut être éliminé en ajoutant une margin-bottom à la <hr> qui précède. À la limite, cette même <hr> pourrait être remplacée par une border-bottom sur le <h4>, mais ça te coupe certaines possibilités. C’est une affaire de compromis.

Les avantages d’alléger le code HTML sont nombreux : ça le rend plus léger, plus lisible, plus facile à faire évoluer, et plus facile à manipuler via les scripts.

Pense sémantique quand tu écris ton code HTML. Une balise devrait représenter un « concept ». Si on prend le concept du bouton, une balise <a> devrait suffire, sans devoir rajouter des <div> dedans et autour.

Dans ce passage (j’ai extrait les parties qui ne changent pas du code PHP) :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div style="text-align:center;">
  <a href="#" data-width="500" data-relinscription2="popupinscription2" class="poplightinscription2">
    <div class="boutonSINSCR" style="display:inline-block;">
      Inscription
    </div>
  </a>
  <div id="popupinscription2" class="popup_inscription2">
    <?php
    include('formulaire inscription.php');
    ?>
  </div>
</div>

Les deux concepts sont le bouton et la popin. La <div style="text-align: center"> qui englobe les deux est un point délicat car, aujourd’hui encore, il est difficile de centrer un élément sans recourir à un conteneur prévu uniquement pour ça. On va donc la garder. Par contre, elle n’a pas besoin d’être autour de la popin.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="button-container">
  <!-- le bouton -->
  <a href="#" data-width="500" data-relinscription2="popupinscription2" class="poplightinscription2 boutonSINSCR">
    Inscription
  </a>
</div>
 
<!-- la popin -->
<div id="popupinscription2" class="popup_inscription2">
  <?php
  include('formulaire inscription.php');
  ?>
</div>

La présentation est assurée par CSS :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.button-container {
  text-align: center;
}
 
.poplightinscription2 {
  display: inline-block;
}

La popin peut garder son id car elle est bel et bien unique dans la page. Les trois boutons ont la même action : la faire apparaître.

Pour que tes trois boutons fonctionnent avec le même bout de script, tu as deux solutions :

soit tu leur donnes la même classe…

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a href="#" data-width="500" data-relinscription2="popupinscription2" class="poplightinscription boutonSINSCR">
  Inscription
</a>
 
...
 
<a href="#" data-width="500" data-relinscription2="popupinscription2" class="poplightinscription boutonSINSCR">
  Inscription
</a>
 
...
 
<a href="#" data-width="500" data-relinscription2="popupinscription2" class="poplightinscription boutonSINSCR">
  Inscription
</a>

soit tu cibles chacune de leurs classes au moment d’ajouter le .on('click', …) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('a.poplightinscription, a.poplightinscription2, a.poplightinscription3').on('click', function () {
 
  ...
 
});