Popup für Infobereich info-panel-popup

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.

NOTE
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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8