Info-Bedienfeld-Popup info-panel-popup

Das Popup des Informationsbereichs wird in der Mitte des Viewer-Bereichs angezeigt, wenn Benutzende eine Imagemap aktivieren, für die in Dynamic Media Classic die Eigenschaft „rollover_key“ definiert ist, und wenn die Funktion des Informationsbereichs für den Viewer ordnungsgemäß konfiguriert ist.

Der Hintergrund des Infobedienfelds deckt den gesamten Viewer-Bereich ab und wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay

Beispiel - Richten Sie das Infobedienfeld-Popup so ein, dass ein halbtransparenter schwarzer Hintergrund verwendet wird.

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

Das Dialogfeld „Infobereich“ wird standardmäßig in der Mitte des Viewer-Bereichs angezeigt. Sie können jedoch ihre Größe, Ausrichtung, den Hintergrund und den Rahmen mit dem CSS-Klassenselektor steuern.

.s7ecatalogsearchviewer .s7infopanelpopup .s7overlay

Beispiel: Richten Sie ein Dialogfeld für das Infobedienfeld mit 300 x 200 Pixeln ein, das im Viewer-Bereich zentriert ist. Es hat oben einen Abstand von 40 Pixeln und auf allen anderen Seiten einen Abstand von 10 Pixeln, einen hellgrauen Hintergrund und einen Rahmenradius von 10 Pixeln und einen Schlagschatten.

.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 „Infobereich“ verfügt über eine Schaltfläche zum Schließen, und durch Klicken oder Tippen auf die Schaltfläche wird das Dialogfeld geschlossen.

Das Erscheinungsbild dieser Schaltfläche wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton

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

Beispiel - Zum Einrichten einer Schaltfläche zum Schließen eines Dialogfelds mit einer Größe von 28 x 28 Pixel, positioniert 5 Pixel vom oberen und rechten Rand des Dialogfelds „Informationsbereich“ und zeigt ein anderes Bild für jeden der vier verschiedenen Schaltflächenstatus an.

.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);
}