Discussion :

[Meloooo]

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]

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

[Meloooo]

Pas d'onload sur ma page

[RomainVALERI]

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]

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.

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]

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