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 Informationsfeld 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

Infobereich füllt den Hintergrund.

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: Zum Einrichten des Infofeld-Dialogfelds mit 300 x 200 Pixel, das im Viewer-Bereich zentriert ist. Er hat oben 40 Pixel Abstand und auf allen anderen Seiten 10 Pixel Abstand, einen hellgrauen Hintergrund sowie einen Rahmenradius von 10 Pixel und 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 state -Attributauswahl, mit der Sie verschiedene Skins auf unterschiedliche Schaltflächenzustände anwenden können.

Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung der Elemente der Benutzeroberfläche für weitere Informationen.

Beispiel: Zum Einrichten eines Dialogfelds "Schließen"-Schaltfläche, die 28 x 28 Pixel groß ist und 5 Pixel von der oberen und rechten Kante des Infofeld-Dialogfelds entfernt ist. Und schließlich zeigt ein anderes Bild für jeden der vier verschiedenen Schaltflächenstatus an.

.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