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 Informationsbedienfeld für den Viewer ordnungsgemäß konfiguriert ist.
Der Hintergrund des Infobereichs umfasst den gesamten Viewer-Bereich und wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay
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.
.s7ecatalogsearchviewer .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.
.s7ecatalogsearchviewer .s7infopanelpopup .s7overlay
Beispiel: Richten Sie das Infofeld-Dialogfeld mit 300 x 200 Pixel ein, das im Viewer-Bereich zentriert ist. Es hat oben einen Abstand von 40 Pixel und auf allen anderen Seiten einen Abstand von 10 Pixel, einen hellgrauen Hintergrund sowie einen Radius und 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 "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:
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton
Position innerhalb des Bildsprites, wenn CSS-Sprites verwendet werden.
Siehe auch CSS-Sprites.
state"-Attributauswahl, mit der Sie verschiedene Skins auf unterschiedliche 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.
.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);
}