Pop-up deelvenster Info info-panel-popup

Pop-upmenu van deelvenster Info wordt midden in het viewergebied weergegeven wanneer een gebruiker een afbeeldingskaart activeert waarvoor een eigenschap rollover_key is gedefinieerd in Dynamic Media Classic, en als de functie van het deelvenster Info correct is geconfigureerd voor de viewer.

De achtergrond van het deelvenster Info bedekt het gehele viewergebied en wordt beheerd met de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay

Voorbeeld - Stel het pop-upvenster Info zo in dat een halftransparante zwarte achtergrond wordt gebruikt.

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

Het dialoogvenster van het deelvenster Info wordt standaard weergegeven in het midden van het viewergebied. Het is echter mogelijk de grootte, uitlijning, achtergrond en rand te bepalen met de CSS-klassenkiezer.

.s7ecatalogsearchviewer .s7infopanelpopup .s7overlay

Voorbeeld: stel een dialoogvenster met 300 x 200 pixels voor het deelvenster Info in dat in het viewergebied is gecentreerd; dit venster heeft een opvulling van 40 pixels boven en een opvulling van 10 pixels aan alle andere zijden, een lichtgrijze achtergrond en een randstraal van 10 pixels en een slagschaduw.

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

Het dialoogvenster Info wordt gesloten en wanneer u op de knop klikt of tikt, wordt het dialoogvenster gesloten.

De vormgeving van deze knop wordt bepaald door de volgende CSS-klassenkiezer:

.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton

De knopinfo kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

Voorbeeld - om een knop voor het sluiten van een dialoogvenster in te stellen die 28 x 28 pixels lang is, 5 pixels vanaf de boven- en rechterrand van het dialoogvenster Info bevindt en een andere afbeelding voor elk van de vier verschillende knopstatussen weergeeft.

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