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

CSS-egenskap
Beskrivning
background-image
Bakgrundsfyllning i panelen Info.
background-position

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

CSS-egenskap
Beskrivning
vänster
Den vågräta positionen för informationsdialogrutan i visningsområdets bakgrundsfyllning.
top
Den lodräta positionen för informationspanelens dialogruta i visningsområdet.
width
Dialogrutans bredd.
height
Dialogrutans höjd.
marginal-vänster
Vänstermarginalen i dialogrutan för informationspanelen kan användas för centrering.
marginal-top
Den övre marginalen i informationsdialogrutan kan användas för centrering.
utfyllnad
Intern utfyllnad av dialogrutor.
background-color
Dialogrutans bakgrundsfärg.
border-radius
Dialogrutans radie.
box-shadow
Dialogrutekugga.

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

CSS-egenskap
Beskrivning
top
Placera från dialogrutans övre kant.
höger
Placera från dialogrutans högra kant.
vänster
Placera från dialogrutans vänstra kant.
nederkant
Placera från dialogrutans nedre kant.
width
Knappbredd.
height
Knapphöjd.
background-image
Bilden som visas för ett visst knappläge.
background-position

Placera inuti en teckningssprite, om CSS-sprites används.

Se även CSS-fragment.

NOTE
Den här knappen har stöd för 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);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8