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:

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay

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

.s7ecatalogviewer .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.

.s7ecatalogviewer .s7infopanelpopup .s7overlay

Voorbeeld - Als u het dialoogvenster voor het deelvenster Info van 300 x 200 pixels wilt instellen dat in het viewergebied wordt gecentreerd. Deze heeft 40 pixels opvulling boven en 10 pixels opvulling aan alle andere zijden, een lichtgrijze achtergrond en een straal en slagschaduw met een rand van 10 pixels.

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

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:

.s7ecatalogviewer .s7infopanelpopup .s7closebutton

De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Voorbeeld - Een dialoogvenster openen Een knop Sluiten van 28 x 28 pixels en 5 pixels van de boven- en rechterrand van het dialoogvenster van het deelvenster Info. En tenslotte, toont een verschillend beeld voor elk van de vier verschillende knoopstaten.

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