Infofeld-Popup

Popup für Infofelder wird mitten im Viewer angezeigt, wenn ein Benutzer eine Imagemap aktiviert, deren Eigenschaft rollover_key in Dynamic Media Classic definiert ist, und wenn die Funktion für das Infofeld für den Viewer ordnungsgemäß konfiguriert ist.

Der Hintergrund des Infofelds deckt den gesamten Viewer-Bereich ab und wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay

CSS-Eigenschaft

Beschreibung

background-image

Hintergrundfüllung im Infofeld.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe auch CSS-Sprites .

Beispiel: Richten Sie das Infofeld-Popup auf einen halbtransparenten schwarzen Hintergrund ein.

.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay { 
 background-color : rgba(0,0,0,0.75); 
}

Das Infofeld-Dialogfeld wird standardmäßig in der Mitte des Viewer-Bereichs angezeigt. Sie können jedoch Größe, Ausrichtung, Hintergrund und Rand mit der CSS-Klassenauswahl steuern.

.s7ecatalogsearchviewer .s7infopanelpopup .s7overlay

CSS-Eigenschaft

Beschreibung

links

Horizontale Position des Infofeld-Dialogfelds innerhalb der Hintergrundfüllung des Viewer-Bereichs.

Anfang

Vertikale Position des Infofeld-Dialogfelds im Viewer-Bereich.

width

Dialogbreite

height

Dialogfeldhöhe.

margin-left

Der linke Rand des Infofeld-Dialogfelds kann für die Zentrierung verwendet werden.

margin-top

Oberer Rand des Infofeld-Dialogfelds, kann für zentrierende Zwecke verwendet werden.

Padding

Interne Dialogfüllung.

background-color

Hintergrundfarbe des Dialogfelds.

border-radius

Rahmenradius des Dialogfelds.

box-shadow

Dialog-Schatten.

Beispiel: Richten Sie ein Infofeld-Dialogfeld mit 300 x 200 Pixeln ein, das im Viewer-Bereich zentriert ist. oben mit 40 Pixel aufgefüllt und an allen anderen Seiten mit 10 Pixel aufgefüllt, ein hellgrauer Hintergrund sowie ein Rahmenradius und ein Schlagschatten mit 10 Pixel.

.s7ecatalogsearchviewer .s7infopanelpopup .s7overlay { 
 left: 50%; 
 top: 50%; 
 margin-left: -150px; 
 margin-top: -100px; 
 width: 300px; 
 height: 200px; 
 padding-top: 40px; 
 padding-right: 10px; 
 padding-bottom: 10px; 
 padding-left: 10px; 
 background-color:rgb(221,221,221); 
 border-radius: 10px 10px 10px 10px; 
box-shadow: 0 0 5px rgba(0,0,0,0.25);  
}

Das Dialogfeld "Infofeld"hat eine Schaltfläche zum Schließen. Durch Klicken oder Tippen auf die Schaltfläche wird das Dialogfeld geschlossen.

Das Erscheinungsbild dieser Schaltfläche wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton

CSS-Eigenschaft

Beschreibung

Anfang

Position vom oberen Rand des Dialogfelds.

rechts

Position vom rechten Rand des Dialogfelds.

links

Position vom linken Rand des Dialogfelds.

unten

Position vom unteren Rand des Dialogfelds.

width

Schaltflächenbreite.

height

Schaltflächenhöhe.

background-image

Das Bild, das für einen bestimmten Schaltflächenstatus angezeigt wird.

background-position

Position innerhalb des Bildausschnitt, wenn CSS-Sprites verwendet werden.

Siehe auch CSS-Sprites .

HINWEIS

Diese Schaltfläche unterstützt die Attributauswahl state, mit der Sie verschiedene Skins auf verschiedene Schaltflächenzustände anwenden können.

Die QuickInfo für Schaltflächen kann lokalisiert werden. Weitere Informationen finden Sie unter Lokale Anpassung der Elemente der Benutzeroberfläche.

Beispiel: Um eine Schaltfläche zum Schließen des Dialogfelds einzurichten, die 28 x 28 Pixel groß ist, 5 Pixel vom oberen und rechten Rand des Infofelddialogfelds entfernt und ein anderes Bild für jeden der vier verschiedenen Schaltflächenzustände anzeigt.

.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton { 
 width: 28px; 
 height: 28px; 
 top: 5px; 
 right: 5px; 
} 
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="up"] { 
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png); 
} 
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="over"] { 
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="down"] { 
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png); 
} 
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton[state="disabled"] { 
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png); 
}

Auf dieser Seite

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now