Mettre plusieurs liens vers une même PopIn
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:
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:
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:
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;
}); |
