Popup für Infobereich

Popup für Info-Bedienfeld wird in der Mitte des Viewer-Bereichs angezeigt, wenn ein Benutzer eine Imagemap aktiviert, für die in Dynamic Media Classic eine Eigenschaft rollover_key definiert ist, und wenn die Funktion für das Infofeld für den Viewer ordnungsgemäß konfiguriert ist.

Der Hintergrund des Infobereichs umfasst den gesamten Viewer-Bereich und wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay

CSS-Eigenschaft

Beschreibung

background-image

Hintergrundfüllung des Infofelds.

background-position

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

Siehe auch CSS-Sprites .

Beispiel: Richten Sie das Infofeld-Popup ein, um einen halbtransparenten schwarzen Hintergrund zu verwenden.

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

Das Dialogfeld "Infobereich"wird standardmäßig in der Mitte des Viewer-Bereichs angezeigt. Es ist jedoch möglich, Größe, Ausrichtung, Hintergrund und Rahmen mit dem CSS-Klassenselektor zu steuern.

.s7ecatalogviewer .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

Dialogfeldbreite.

height

Dialogfeldhöhe.

margin-left

Der linke Rand des Infofeld-Dialogfelds kann zu zentrierenden Zwecken verwendet werden.

margin-top

Der obere Rand des Infofeld-Dialogfelds kann zu zentrierenden Zwecken verwendet werden.

Padding

Interner Abstand im Dialogfeld.

background-color

Hintergrundfarbe des Dialogfelds.

border-radius

Dialogfeldradius.

box-Shadow

Dialogschatten.

Beispiel: Einrichten des Infofelddialogfelds mit 300 x 200 Pixel, das im Viewer-Bereich zentriert ist; hat oben einen Abstand von 40 Pixel und auf allen anderen Seiten einen Abstand von 10 Pixel, einen hellgrauen Hintergrund sowie einen Rahmenradius von 10 Pixel und einen Schlagschatten.

.s7ecatalogviewer .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 "Info Panel"verfügt über 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:

.s7ecatalogviewer .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 Bildsprites, 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 der Schaltfläche kann lokalisiert werden. Weitere Informationen finden Sie unter Lokalisierung von Benutzeroberflächenelementen.

Beispiel: Um eine Schaltfläche zum Schließen eines Dialogfelds einzurichten, die 28 x 28 Pixel groß ist, 5 Pixel von der oberen und rechten Kante des Infofeld-Dialogfelds entfernt ist und ein anderes Bild für jeden der vier verschiedenen Schaltflächenstatus anzeigt.

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

Auf dieser Seite