Discussion :

[renaud26]

Bonjour à tous,

J'ai vu que, grâce au CSS, on peut appliquer un genre de masque dont l'opacité est réglable avec opacity ou filter.
La construction de ma page est du type :

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
 
<style>
.masque50{
  position:relative;
  top: 0px;
  left:0px;
  width:800px;
  height:100%;
  background-color: rgb(0, 0, 0); 
  z-index: 1000; 
  opacity: 0.50; 
  filter:alpha(opacity=50); 
}
 
</style>
<div id="conteneur" class="masque50">
<form>
<des dizaines de champs et inputs divers>
</form>
</div>

Ca fonctionne ok, il y a un genre de "voile" sur le formulaire. Mais ma question est : existe-t-il une fonction qui permette de "disabled" l'ensemble sans le faire pour chaque champ du formulaire ? En fin de compte, le div entier ne serait pas clicable...

Merci !

[Bovino]

Salut.

Ton principe de fonctionnement pour ton masque n'est pas le bon.
Si tu places ton formulaire dans le masque, d'une part, celui-ci hérite de l'opacité ce qui n'est habituellement pas le comportement voulu et surtout, ton masque ne masque rien...

Le principe est de superposer les deux éléments et de positionner ton masque soit par dessus (via un z-index par exemple) soit en dessous. Comme ça, en fonction de son z-index, ton formulaire sera soit masqué, soit non.

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
20
21
22
23
24
25
26
27
<style>
.masque50{
  position:relative;
  top: 0px;
  left:0px;
  width:800px;
  height:100%;
  background-color: rgb(0, 0, 0); 
  z-index: 1000; 
  opacity: 0.50; 
  filter:alpha(opacity=50); 
}
.masqueForm{
 position:relative;
 top:0;
  width:800px;
  height:100%;
  background-color: rgb(0, 0, 0); 
  z-index: 500; 
}
 
</style>
<div id="conteneur" class="masque50">
</div>
<form class="masqueForm">
<des dizaines de champs et inputs divers>
</form>

Ensuite, tu n'as plus qu'à utiliser la propriété style.zIndex de ces éléments pour faire passer l'un au-dessus de l'autre en fonction de tes besoins.

[renaud26]

Bonjour et merci du tuyau : c'est impec.
Bonne fin de journée.