Discussion :

[Herode]

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 :

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

1
2
3
4
5
                    <div id="popin">
                        <div class="content">
                            IcI apparait un formulaire...
                        </div>
                    </div>

La méthode show() :

Code :

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

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 ?

[Bovino]

Salut,

Ma question : comment puis-je forcer l'opacité de l'élément de classe 'content' enchâssé dans le popin ?

Tu ne peux pas !
La solution consiste en général à superposer deux éléments (par exemple une div background et une div contenu) dont tu précises l'opacité pour l'élément du dessous.

[Herode]

En effet. Tant pis, et merci pour cette confirmation