lightbox pour un formulaire

Version imprimable

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

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
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:

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:

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:

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..

27/01/2011, 11h22
RomainVALERI

Qu'y a-t-il sur le onload du body ? (ou même sur d'autres onload sait-on jamais ^^)
27/01/2011, 11h23
Meloooo

Pas d'onload sur ma page
27/01/2011, 12h10
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)
27/01/2011, 13h01
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:

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:

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.

Citation:

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.

Si je vous ai fournis les appels des fonctions openbox :

Code:

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:

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

27/01/2011, 13h29
NoSmoking

Citation:

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

Alors je comprends le raisonnement, mais alors pour le mettre en pratique la c'est autre chose :aie:
Donc voici un apercu de mes fonctions corrigés

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
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:

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 :/

27/01/2011, 13h44
RomainVALERI
Citation:
Envoyé par Meloooo

Si je vous ai fournis les appels des fonctions openbox :

Code:

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 :roll: 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 :aie:

Code:

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

27/01/2011, 13h47
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:

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
27/01/2011, 13h50
NoSmoking

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
27/01/2011, 13h52
NoSmoking
Citation:
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:

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:

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

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:

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:

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 ?

Citation:

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:

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:

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:

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à...