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:
.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay
Placera inuti en teckningssprite, om CSS-sprites används.
Se även CSS-fragment.
Exempel - Ange popup-fönstret på informationspanelen för att använda en halvgenomskinlig svart bakgrund.
.s7ecatalogsearchviewer .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.
.s7ecatalogsearchviewer .s7infopanelpopup .s7overlay
Exempel - ställ in en dialogruta med 300 x 200 pixlar i informationspanelen som är centrerad i visningsområdet; 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.
.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);
}
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:
.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton
Placera inuti en teckningssprite, om CSS-sprites används.
Se även CSS-fragment.
state
attributväljaren, som du kan använda för att använda olika skal på olika knapplägen.Knappens funktionsbeskrivning kan lokaliseras. Se Lokalisering av användargränssnittselement för mer information.
Exempel - om du vill ställa in en stängningsknapp i en dialogruta som är 28 x 28 pixlar, placerad 5 pixlar från den övre och högra kanten av dialogrutan för informationspanelen, och visa en bild för vart och ett av de fyra knapplägena.
.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);
}