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
Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.
Zie ook CSS-sprites.
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: een dialoogvenster van het deelvenster Info van 300 x 200 pixels instellen dat in het viewergebied wordt gecentreerd; heeft 40 pixels opvulling boven en 10 pixels opvulling aan alle andere zijden, een lichtgrijze achtergrond en een randstraal van 10 pixels en 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
Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.
Zie ook CSS-sprites.
state
kenmerkenkiezer, die u kunt gebruiken om verschillende skins toe te passen op verschillende knoptoestanden.De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen 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);
}