lightbox pour un formulaire

**Meloooo** · 27/01/2011, 11h14

Bonjour,
Je souhaite ouvrir deux formulaires dans une lightbox sur une même page...
Pour cela j'utilise ce code :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
function gradient(id, level)
{
	var box = document.getElementById(id);
	box.style.opacity = level;
	box.style.MozOpacity = level;
	box.style.KhtmlOpacity = level;
	box.style.filter = "alpha(opacity=" + level * 100 + ")";
	box.style.display="block";
	return;
}
 
 
function fadein(id) 
{
	var level = 0;
	while(level <= 1)
	{
		setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
		level += 0.01;
	}
}
 
// Open the lightbox
 
 
function openbox(formtitle, fadin)
{
 
  var box = document.getElementById('box'); 
  document.getElementById('filter').style.display='block';
 
  var btitle = document.getElementById('boxtitle');
  btitle.innerHTML = formtitle;
  if(fadin)
  {
	 gradient("box", 0);
	 fadein("box");
 
  }
  else
  { 	
    box.style.display='block';
 
  }
  var newvar=formtitle;
document.getElementById('ladiv').innerHTML=newvar;
 
}
 
 
// Close the lightbox
 
function closebox()
{
   document.getElementById('box').style.display='none';
   document.getElementById('filter').style.display='none';
}
function gradient2(id2, level2)
{
	var ma_box = document.getElementById(id2);
	ma_box.style.opacity = level2;
	ma_box.style.MozOpacity = level2;
	ma_box.style.KhtmlOpacity = level2;
	ma_box.style.filter2 = "alpha(opacity=" + level2 * 100 + ")";
	ma_box.style.display="block";
	return;
}
function fadein2(id2) 
{
	var level2 = 0;
	while(level2 <= 1)
	{
		setTimeout( "gradient2('" + id2 + "'," + level2 + ")", (level2* 1000) + 10);
		level2 += 0.01;
	}
}
function openbox2(formtitle2, fadin2)
{
  var ma_box = document.getElementById('box2'); 
  document.getElementById('filter2').style.display='block';
 
  var btitle2 = document.getElementById('boxtitle2');
  btitle2.innerHTML = formtitle2;
 
  if(fadin2)
  {
	 gradient2("ma_box", 0);
	 fadein2("ma_box");
  }
  else
  { 	
    ma_box.style.display='block';
  }  
  var newvar2=formtitle2;
document.getElementById('ladiv2').innerHTML=newvar2;  
}	
function closebox2()
{
   document.getElementById('box2').style.display='none';
   document.getElementById('filter2').style.display='none';
}

Ensuite j'appelle la fonction openbox et openbox2 comme ceci :

Code :

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

1
2
3
 
<td onclick="openbox('titre', 1)" class="test">
<td onclick="openbox2('titre', 1)" class="test2">

Je vous donnes également les div correspondant :

Code :

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

1
2
3
4
5
6
 
<div id="filter"></div>
<div id="box">
  <span id="boxtitle"></span>
// mon formulaire 1
</div>

et ensuite pour mon formulaire 2

Code :

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

1
2
3
4
5
6
7
 
 
<div id="filter2"></div>
<div id="box2">
  <span id="boxtitle2"></span>
// mon formulaire 2
</div>

Mon souci c'est que mon deuxième formulaire s'affiche directement à l'ouverture de ma page et non sur le click de mon td
Comment faire pour qu'il m'ouvre mon formulaire que quand j'ai cliqué sur mon td...
Pour le premier formulaire tout fonctionne..

**RomainVALERI** · 27/01/2011, 11h22

Qu'y a-t-il sur le onload du body ? (ou même sur d'autres onload sait-on jamais ^^)

**Meloooo** · 27/01/2011, 11h23

Pas d'onload sur ma page

**RomainVALERI** · 27/01/2011, 12h10

Alors c'est un script directement inclus dans le head ou le body... montre le code de ta page ou même un lien c'est encore mieux ^^

(parce que dans les extraits présentés il n'y a que des définitions de fonctions, aucun appel)

**NoSmoking** · 27/01/2011, 13h01

Bonjour,
pourquoi dupliquer les fonctions, une pour chaque formulaire, autant optimiser les fonction pour quelles soient opérationnelle quelque soit le nombre de formulaire.
exemle

Code :

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

1
2
3
4
function closebox( id_box, id_filtre){
   document.getElementById( id_box).style.display='none';
   document.getElementById( id_filtre).style.display='none';
}

il suffit donc d'appeler ensuite

Code :

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

1
2
closebox( 'box', 'filtre');
closebox( 'box2', 'filtre2');

idem pour les autres fonctions, tu peux également mettre l'ensemble dans une DIV et ne masquer/afficher que celle ci.

Envoyé par Meloooo

Comment faire pour qu'il m'ouvre mon formulaire que quand j'ai cliqué sur mon td...
Pour le premier formulaire tout fonctionne..

il faut au départ mettre en style.display : none ton second formulaire, via la feuille de style.

**Meloooo** · 27/01/2011, 13h09

Si je vous ai fournis les appels des fonctions openbox :

Code :

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

1
2
3
 
<td onclick="openbox('titre', 1)" class="test">
<td onclick="openbox2('titre', 1)" class="test2">

Pour ce qui est de la solution de NoSmoking, c'est vrai que c'est beaucoup plus pratique...
suis-je sur la bonne voie ?

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
53
54
55
56
 
function gradient(id, level)
{
	var box = document.getElementById(id);
	box.style.opacity = level;
	box.style.MozOpacity = level;
	box.style.KhtmlOpacity = level;
	box.style.filter = "alpha(opacity=" + level * 100 + ")";
	box.style.display="block";
	return;
}
 
 
function fadein(id) 
{
	var level = 0;
	while(level <= 1)
	{
		setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
		level += 0.01;
	}
}
 
// Open the lightbox
 
 
function openbox(formtitle, fadin, id_box, id_filtre)
{
 
  var box = document.getElementById(id_box); 
  document.getElementById(id_filtre).style.display='block';
 
  var btitle = document.getElementById('boxtitle');
  btitle.innerHTML = formtitle;
  if(fadin)
  {
	 gradient(id_box, 0);
	 fadein(id_box);
 
  }
  else
  { 	
    box.style.display='block';
 
  }
  var newvar=formtitle;
document.getElementById('ladiv').innerHTML=newvar;
 
}
 
// Close the lightbox
 
function closebox( id_box, id_filtre){
   document.getElementById( id_box).style.display='none';
   document.getElementById( id_filtre).style.display='none';
}

Dois-je le faire également pour gradient et fadein ?
Je m'y connais pas forcément en javascript alors désolé si ma question parait ridicule
Merci de votre aide

**NoSmoking** · 27/01/2011, 13h29

Dois-je le faire également pour gradient et fadein ?
Je m'y connais pas forcément en javascript alors désolé si ma question parait ridicule
Merci de votre aide

oui
regardes dans les fonctions ce qui change, en fait les ID, et passe les en paramètres.

Pour fadein et fadein2 tu peux purement et simplement en supprimer une, idem pour gradient et gradient2.

Il te reste à traiter openbox et closebox

**Meloooo** · 27/01/2011, 13h36

Alors je comprends le raisonnement, mais alors pour le mettre en pratique la c'est autre chose

Donc voici un apercu de mes fonctions corrigés

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
53
54
55
56
 
function gradient(id_box, level, id_filter)
{
	var box = document.getElementById(id);
	box.style.opacity = level;
	box.style.MozOpacity = level;
	box.style.KhtmlOpacity = level;
	box.style.filter = "alpha(opacity=" + level * 100 + ")";
	box.style.display="block";
	return;
}
 
 
function fadein(id_box, id_filter) 
{
	var level = 0;
	while(level <= 1)
	{
		setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
		level += 0.01;
	}
}
 
// Open the lightbox
 
 
function openbox(formtitle, fadin, id_box, id_filtre)
{
 
  var box = document.getElementById(id_box); 
  document.getElementById(id_filtre).style.display='block';
 
  var btitle = document.getElementById('boxtitle');
  btitle.innerHTML = formtitle;
  if(fadin)
  {
	 gradient(id_box, 0 , id_filter);
	 fadein(id_box, id_filter);
 
  }
  else
  { 	
    box.style.display='block';
 
  }
  var newvar=formtitle;
document.getElementById('ladiv').innerHTML=newvar;
 
}
 
// Close the lightbox
 
function closebox( id_box, id_filtre){
   document.getElementById( id_box).style.display='none';
   document.getElementById( id_filtre).style.display='none';
}

Ensuite l'appel :

Code :

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

1
2
3
 
	<td onclick="openbox('titre' ,1, box, filter)" class="vaccin1">contenu</td>
<td onclick="openbox('titre' , 1, box2, filter)" class="vaccin2">contenu</td>

Mais maintenant ce n'est plus cliquable :/

**RomainVALERI** · 27/01/2011, 13h44

Envoyé par Meloooo

Si je vous ai fournis les appels des fonctions openbox :

Code html :

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

1
2
3
 
<td onclick="openbox('titre', 1)" class="test">
<td onclick="openbox2('titre', 1)" class="test2">

En effet, ce sont bien des appels ^^
Par contre, si quelque chose se déclenche dès l'ouverture de la page, ce n'est certainement pas ça

Il doit y avoir, ailleurs, d'autres appels, exécutés hors de toute fonction, un onclick ne se déclenche pas tout seul. Il y a déjà pas mal de dingueries en dev web, mais si on en arrive là, moi je pars élever des chèvres dans le Larzac

**NoSmoking** · 27/01/2011, 13h47

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
// id_box      : 'box'
// id_filter   : 'filter'
// id_ladiv    : 'la_div'
// id_boxtitle : 'boxtitle'
function openbox( id_box, id_filter, id_boxtitle, id_ladiv, formtitle, etat_fadin) {
  var box = document.getElementById( id_box);
  document.getElementById( id_filter).style.display = 'block';
 
  var btitle = document.getElementById( id_boxtitle);
  btitle.innerHTML = formtitle;
  if ( etat_fadin) {
    gradient( id_box, 0);
    fadein( id_box);
  } else {
    box.style.display = 'block';
  }
  var newvar = formtitle;
  document.getElementById( id_ladiv).innerHTML = newvar;
}

attention au passage des paramètres les chaines entre quotes

**Meloooo** · 27/01/2011, 13h47

Non justement mon onclick ne se déclenche pas... c'est ca qui se déclenche dès l'ouverture de la page :

Code :

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

1
2
3
4
5
6
 
<div id="filter"></div>
<div id="box">
  <span id="boxtitle"></span>
// mon formulaire
</div>

Alors qu'il ne devrait pas, car il doit s'exécuter QUE sur le onclick de mon td.
PS : on pourra élever les chèvres ensemble, je viens de ce pays noundidiou !! lol

**NoSmoking** · 27/01/2011, 13h50

j'ai oublié de dire, au passage j'ai modifié le paramètre fadein en etat_fadein pour qu'il ait un nom bien différent de celui d'une fonction appelée

**NoSmoking** · 27/01/2011, 13h52

Envoyé par Meloooo

Non justement mon onclick ne se déclenche pas... c'est ca qui se déclenche dès l'ouverture de la page :

Code :

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

1
2
3
4
5
6
 
<div id="filter"></div>
<div id="box">
  <span id="boxtitle"></span>
// mon formulaire
</div>

Alors qu'il ne devrait pas, car il doit s'exécuter QUE sur le onclick de mon td.
PS : on pourra élever les chèvres ensemble, je viens de ce pays noundidiou !! lol

relis ce que j'ai mis plus haut, tu devrais avoir dans le style

Code :

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

1
2
3
4
5
6
.filter {
  display : none;
}
.box {
  display : none;
}

à minima

**Meloooo** · 27/01/2011, 13h53

Bon euh j'y arrive pas :/
Dès que je clique il me fait un petit ombrage de la page, mais le formulaire ne s'ouvre pas :

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
 
function gradient(id_box, level, id_filter)
{
	var box = document.getElementById(id);
	box.style.opacity = level;
	box.style.MozOpacity = level;
	box.style.KhtmlOpacity = level;
	box.style.filter = "alpha(opacity=" + level * 100 + ")";
	box.style.display="block";
	return;
}
 
 
function fadein(id_box, id_filter) 
{
	var level = 0;
	while(level <= 1)
	{
		setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
		level += 0.01;
	}
}
 
// Open the lightbox
 
 
function openbox( id_box, id_filter, id_boxtitle, id_ladiv, formtitle, etat_fadin) {
  var box = document.getElementById( id_box);
  document.getElementById( id_filter).style.display = 'block';
 
  var btitle = document.getElementById( id_boxtitle);
  btitle.innerHTML = formtitle;
  if ( etat_fadin) {
    gradient( id_box, 0);
    fadein( id_box);
  } else {
    box.style.display = 'block';
  }
  var newvar = formtitle;
  document.getElementById( id_ladiv).innerHTML = newvar;
}
 
// Close the lightbox
 
function closebox( id_box, id_filtre){
   document.getElementById( id_box).style.display='none';
   document.getElementById( id_filtre).style.display='none';
}

Et l'appel :

Code :

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

1
2
 
	<td onclick="openbox('box' , 'filter' , 'essai' , 'ladiv' , 'essai' , 1)" class="vaccin1">contenu</td>

id_boxtitle et formtitle c'est pas la même chose ?

**NoSmoking** · 27/01/2011, 18h58

Envoyé par Meloooo

id_boxtitle et formtitle c'est pas la même chose ?

cela serait à toi de nous le dire...
concernant la fonction

Code :

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

1
2
3
4
5
6
7
function fadein(id_box, id_filter){
  var level = 0;
  while(level <= 1){
    setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
    level += 0.01;
  }
}

il te faut passer id_box à la fonction gradient dans le setTimeout

Code :

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

1
2
setTimeout( "gradient('" + id_box + "'," + level + ")", (level* 1000) + 10);
le passage du paramètre,

id_filter n'est pas utile tu ne l'utilises pas

idem pour la fonction gradient

Code :

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

1
2
3
4
5
6
7
8
9
10
function gradient(id_box, level, id_filter){  // id_filter ne sert pas 
  var box = document.getElementById( id_box); // modif ICI
  box.style.opacity = level;
  box.style.MozOpacity = level;
  box.style.KhtmlOpacity = level;
  box.style.filter = "alpha(opacity=" + level * 100 + ")";
  box.style.display="block";
  // return inutile
  return;
}

voila déjà...

lightbox pour un formulaire

JavaScript

Discussions similaires

Partager

Partager