Pop-up do painel Informações

Última atualização em 2023-05-20
  • Criado para:
  • Developer
    User

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 rollover_key definida no Dynamic Media Classic e se o recurso do painel 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:

.s7ecatalogsearchviewer .s7infopanelpopup .s7backoverlay

Propriedade CSS

Descrição

background-image

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

background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS .

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

.s7ecatalogsearchviewer .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.

.s7ecatalogsearchviewer .s7infopanelpopup .s7overlay

Propriedade CSS

Descrição

left

Posição horizontal da caixa de diálogo do painel de informações dentro do 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.

largura

Largura da caixa de diálogo.

altura

Altura do diálogo.

margem esquerda

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.

preenchimento

Preenchimento da caixa de diálogo interna.

background-color

Cor de fundo da caixa de diálogo.

border-radius

Raio da borda do diálogo.

box-shadow

Sombra de diálogo.

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

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

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:

.s7ecatalogsearchviewer .s7infopanelpopup .s7closebutton

Propriedade CSS

Descrição

top

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

direita

Posição 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 exibida para um determinado estado de botão.

background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também Sprites CSS .

OBSERVAÇÃO

Esse botão oferece suporte ao state seletor de atributos, que você pode usar para aplicar capas diferentes a estados de botão diferentes.

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

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

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

Nesta página