Pop-up do painel Informações

O Pop-up do painel Informações é exibido no meio da área do visualizador quando um usuário ativa um mapa de imagem que tem uma propriedade roll_key definida no Dynamic Media Classic e se o recurso do painel de informações está configurado corretamente para o visualizador.

O plano de fundo do painel Informações cobre toda a área do visualizador e é controlado com o seguinte seletor de classe CSS:

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay

Propriedade CSS

Descrição

background-image

Preenchimento de plano de fundo do painel Informações.

posição de fundo

Posição dentro da sprite de arte, se os sprites CSS forem usados.

Consulte também CSS Sprites .

Exemplo - configure o pop-up do painel de informações para usar um plano de fundo preto semitransparente.

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

A caixa de diálogo do painel de informações é exibida por padrão no meio da área do visualizador. No entanto, é possível controlar seu tamanho, alinhamento, plano de fundo e borda com o seletor de classe CSS.

.s7ecatalogviewer .s7infopanelpopup .s7overlay

Propriedade CSS

Descrição

left

Posição horizontal da caixa de diálogo do painel de informações no preenchimento do plano de fundo do painel da área do visualizador.

top

Posição vertical da caixa de diálogo do painel de informações na área do visualizador.

width

Largura da caixa de diálogo.

altura

Altura da caixa de diálogo.

margem esquerda

A margem esquerda da caixa de diálogo do painel de informações pode ser usada para fins de centralização.

margem superior

A margem superior da caixa de diálogo do painel de informações pode ser usada para fins de centralização.

revestimento

Preenchimento da caixa de diálogo interna.

cor de fundo

Cor do plano de fundo da caixa de diálogo.

raio da borda

Raio da borda da caixa de diálogo.

sombra de caixa

Sombra do diálogo.

Exemplo - configure a caixa de diálogo do painel de informações de 300 x 200 pixels centralizada na área do visualizador; tem 40 pixels de preenchimento na parte superior e 10 pixels de preenchimento em todos os outros lados, um fundo cinza claro e um raio de borda de 10 pixels e sombra projetada.

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

A caixa de diálogo Painel de informações tem um botão Fechar e clicar ou tocar no botão fecha a caixa de diálogo.

A aparência desse botão é controlada com o seguinte seletor de classe CSS:

.s7ecatalogviewer .s7infopanelpopup .s7closebutton

Propriedade CSS

Descrição

top

Posição a partir da borda superior da caixa de diálogo.

right

Posição a partir da borda direita da caixa de diálogo.

left

Posição da borda esquerda da caixa de diálogo.

bottom

Posição na borda inferior da caixa de diálogo.

largura

Largura do botão.

altura

Altura do botão.

background-image

A imagem que é exibida para um determinado estado de botão.

posição de fundo

Posição dentro da sprite de arte, se os sprites CSS forem usados.

Consulte também CSS Sprites .

OBSERVAÇÃO

Este botão suporta o seletor de atributos state, que você pode usar para aplicar diferentes capas a diferentes estados de botão.

A dica de ferramenta do botão pode ser localizada. Consulte Localização de elementos da interface do usuário para obter mais informações.

Exemplo - para configurar um botão de fechamento da caixa de diálogo com 28 x 28 pixels, posicionado 5 pixels da borda superior e direita da caixa de diálogo do painel de informações e exibe uma imagem diferente para cada um dos quatro estados de botão diferentes.

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

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free