Popup för panelen Info info-panel-popup

Panelpopup i panelen Info visas mitt i visningsområdet när en användare aktiverar ett bildschema som har en rollover_key-egenskap definierad i Dynamic Media Classic och om funktionen i informationspanelen är korrekt konfigurerad för visningsprogrammet.

Bakgrunden i informationspanelen täcker hela visningsprogramområdet och styrs med följande CSS-klassväljare:

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay

Exempel - ställ in popup-fönstret på informationspanelen så att en halvgenomskinlig svart bakgrund används.

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

Informationspanelens dialogruta visas som standard i mitten av visningsprogramområdet. Det går dock att styra dess storlek, justering, bakgrund och kant med CSS-klassväljaren.

.s7ecatalogviewer .s7infopanelpopup .s7overlay

Exempel - Om du vill ställa in en dialogruta med 300 x 200 pixlar i informationspanelen som är centrerad i visningsområdet. Den har utfyllnad på 40 pixlar längst upp och utfyllnad på 10 pixlar på alla andra sidor, en ljusgrå bakgrund och en radie och skugga på 10 pixlar.

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

Dialogrutan Info-panelen har en stängningsknapp, och om du klickar på eller trycker på knappen stängs dialogrutan.

Utseendet på den här knappen styrs av följande CSS-klassväljare:

.s7ecatalogviewer .s7infopanelpopup .s7closebutton

Knappens funktionsbeskrivning kan lokaliseras. Mer information finns i Lokalisering av användargränssnittselement.

Exempel - Om du vill ställa in en dialogrutas stängningsknapp som är 28 x 28 pixlar och placerad 5 pixlar från den övre och högra kanten av dialogrutan för informationspanelen. Slutligen visas olika bilder för de fyra olika knapplägena.

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