PopCart mit "transparentem Hintergrund"

[Jürgen]

Hallo zusammen,

habe das popcart Modul installiert. Funktioniert auch alles tadellos, kann mir jemand auf die Sprünge helfen wie ich beim popcart einblenden gleichzeitig den Hintergrund transparent machen kann....?

Das ist der code der popcart box:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="boxes"}
<div id="popCart">
        <div class="popup_header">{#heading_alert#}</div>
        <div class="popup_image">
                {if $box_content.PRODUCTS_IMAGE!=''}<img src="{$box_content.PRODUCTS_IMAGE}" alt="{$box_content.PRODUCTS_NAME}" class="productimg"/>
                                        <br />{/if}
        </div>
        <div class="cart_contents">
                <strong>{$PRODUCTS} {#products_in_cart#}</strong><br/>
                Summe: {$TOTAL}
        </div>
                <div id="pop_buttons_box">
                <a href="#" onclick="document.getElementById('popCart').style.display='none'; return false;"><div class="close_button">{#link_shopping#}</div></a><a href="{$LINK}"><div class="cart_button">{#link_cart#}</div></a>
        </div>
</div>
{$SCRIPT}
 

Jetzt müsste mann doch hier "hinter alles" ein DIV legen mit "transparentem Hintergrund", sprich
alles weiss und 50% transparenz oder vollflächig ein png mit Transparenz...

Habe leider keine Ahnung wie das geht...

Danke für die Hilfe

Grüsse

Jürgen



Linkback: https://www.modified-shop.org/forum/index.php?topic=13656.0

[lzwerch]

Hallo,

ich habe ein paar Zeilen im Netz gefunden und diese noch etwas modifiziert.
Nun funktioniert es bei mir mit dem transparenten Hintergrund prima.

Zusätzliche Zeile in der Stylesheet:

Code: CSS  [Auswählen]

#bckgd {z-index:1000; border: medium none; margin: 0pt; padding: 0pt; width: 100%; height: 100%; top: 0pt; left: 0pt; background-color: rgb(0,0,0); opacity: 0.65; position: fixed;}

Und meine box_popcart.html sieht so aus:

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="boxes"}
<div id="bckgd"></div>
<div id="popCart">
        <div class="popup_header">{#heading_alert#}</div>
       <div class="popup_image">
                {if $box_content.PRODUCTS_IMAGE!=''}<img src="{$box_content.PRODUCTS_IMAGE}" alt="{$box_content.PRODUCTS_NAME}" />
                                        <br />{/if}
        </div>
        <div class="cart_contents">
                <strong>{$PRODUCTS} {#products_in_cart#}</strong><br/>
               {#text_total#} {$UST|replace:"<br />":""}:{$TOTAL}
       </div>
        <div class="cart_symbol"></div>
        <div id="pop_buttons_box">
                <a href="javascript:history.back(0)" onclick="$.unblockUI()""document.getElementById('popCart').style.display='none'; return false;><div class="close_button">{#link_shopping#}</div></a><a href="{$LINK}"><div class="cart_button">{#link_cart#}</div></a>
        </div>
</div>
{$SCRIPT}

Ich hoffe die Zeilen helfen ein wenig...

ciao... Lzwerch

[hedon02]

Code: XML  [Auswählen]

<div id="bckgd"></div>

bist Du sicher, dass dieser "div-container" oben bereits geschlossen wird? Hab's mir jetzt nicht im Detail angeschaut, aber muss wahrscheinlich ganz ans Ende Deines Codes (besser mal alle "<div>" prüfen, nicht das am Schluss eins zu viel drin ist).

Cross Browser Opacity:

Code: CSS  [Auswählen]

#bckgd {  
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

EDIT: Code ersetzt

[lzwerch]

Hallo hedon02,

das mit dem </div> am Ende des Listings war auch im Original so.
Leider ist denn aber auch der Hintergrund von dem Popup-Fenster transparent (siehe Screen).

die Cross Browser Op. habe ich aber gleich bei mir nachgetragen und hatte leider keinen Erfolg.
Das Popup ging zwar auf aber weder mit IE noch mit FF wurde der Hintergrund abgedunkelt.

Ich habe unsere Zeilen gemischt und nun funktioniert es mit IE9, FF und Opera

Code: CSS  [Auswählen]

#bckgd {z-index:1000; border: medium none; margin: 0pt; padding: 0pt; width: 100%; height: 100%; top: 0pt; left: 0pt; background-color: rgb(0,0,0); opacity: 0.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50); opacity: 0.5; position: fixed;}

Ich bin leider kein HTML/PHP- Spezi und muss vieles ausprobieren und zusammenpuzzeln..

Ciao...  Lzwerch

[Matt]

Das kann jetzt keiner mehr vernünftig lesen. 50% ist vielleicht auch etwas übertrieben.

opacity hat leider den Nachteil, dass alle Kindelemente auch davon betroffen sind und damit auch transparent werden. Lieber rgba für die Hintergrundfarbe nehmen: http://www.css3.info/preview/rgba/

[hedon02]

  Die 50% waren ja nur ein Beispiel.

[...]
das mit dem </div> am Ende des Listings war auch im Original so.
Leider ist denn aber auch der Hintergrund von dem Popup-Fenster transparent (siehe Screen).
[...]

Ja und ich weiss jetzt auch warum, damit kann man die Vererbung der Transparenz auf die nachfolgenden Elemente umgehen. Lies mal folgenden "Link", da wird es erklärt: Non-Transparent Elements Inside Transparent Elements