Opacité d'éléments enchâssés
Bonjour à tous,
je cherche à obtenir un popin simple : en cliquant sur un lien, on fait surgir sur la page un formulaire de contact. Le formulaire est totalement opaque, il occupe environ 50% de a surface disponible, le reste est voilé par le fond du popin avec une opacité de 0.5.
J'ai placé tout ça dans une petite classe utilitaire, quand on clique sur le lien on appelle la méthode show().
Le HTML concerné :
Code:
1
2
3
4
5
| <div id="popin">
<div class="content">
IcI apparait un formulaire...
</div>
</div> |
La méthode show() :
Code:
1
2
3
4
5
6
7
8
9
| Popin.prototype.show = function(delay, bgOpacity, contentOpacity) {
var popin = $('#' + this.popinId);
var content = $('.content', popin);
popin.show().fadeTo(delay, bgOpacity, function() {
content.fadeTo(delay, contentOpacity);
content.css({background:'red'}); // juste pour vérifier qu'on vise le bon élément
alert(contentOpacity); // // juste pour vérifier la valeur
});
} |
Le popin apparait bien, les vérifications sont OK : le formulaire placé dans l'élément content a un fond rouge, contentOpacity vaut bien 1.
Malheureusement, tout le popin, formulaire compris, garde une opacité de 0.5.
Ma question : comment puis-je forcer l'opacité de l'élément de classe 'content' enchâssé dans le popin ?
