Nesse tutorial, ensinarei a criar um DIV que será exibida como pop-up, flutuando sobre os demais elementos da sua página.
Veja o exemplo clicando no link abaixo:
DIV pop-up: Aparecer
Nosso código consistirá em um DIV oculto, onde, ao clicar em um link para abrir, ela será aberta em forma de uma pop-up flutuante, e, ao clicar no link para fechar, o qual estará nopop-up, ela será ocultada novamente.
Nesse primeiro caso, trata-se de uma DIV pop-up que ficará no mesmo lugar, independente de você rolar a página a baixo ou não.
Esse é o código da DIV:
Esse
será o código do link que abrirá sua DIV:
Atributos do código
Para quem não sabe, esses atributos que estamos usando nesse tutorial se trata do CSS. No caso, utilizamos o CSS com suas definições dentro de Style.DIV: Será a janela que aparecerá quando você clicar no link. Ele é um elemento do HTML.
O Style do nosso código poderá ser definido em:
Background-color: Esse é o código para que você possa definir a cor de fundo da sua DIV pop-up. Você poderá defini-la como White (branco), Black (Preto), Red (vermelho), Blue (azul), entre outros. Também você poderá colocar aquele código de cores de HTML. Você poderá encontrar a lista de cores em código HEX na MXStudio.
Display: Esse é o atributo responsável por ocultar ou não a nossa Div, sendo que "Block" torna o elemento visível, ao passo que "None" o torna ínvisível.
Height e Width: nesses dois, você definirá a altura e largura para a sua DIV. Height é a altura, e Width, a largura.
Z-index: esse código definirá por um número determinado a ordem de sobreposição da sua DIV. No caso, se você tiver um elemento em sua página com z-index: 99, use z-index: 100.
“Position: Absolute;” : Esse código fará com que a DIV tenha um aspecto de janela. Se você estiver usando o KompoZer para editar, você passará poder editar essa DIV “em tempo real” quando você pôr esse código nela. É recomendável que, se você for personalizar algo e não tiver muita habilidade com códigos HTML, sugiro que use um bom editor de HTML.
Left e Top: left: númeropx; top: númeropx tratam-se das posições da sua DIV em relação a página. Como no nosso caso a DIV flutuará sobre a página, ela será usada para posicionar o local onde essa DIV flutuará. Align: Esse será o alinhamento. Ele poderá ser definido em Justify, Center, left e right.
Id: será usada para nomear sua div, a fim de que, quando clicar no link, esta seja chamada (através do nome do Id) pelo link, que contém o código para torná-la visível. No caso, a id da nossa primeira Div é 'Parada'.
Pop-up flutuante que acompanha o Scroll da página
Para que a sua Div Pop-up possa flutuar e acompanhar o scroll da página, (isto é, acompanhar a página quando a pessoa rolar o mouse pra baixo ou pra cima), basta trocar o atributo "position: absolute" por "position: fixed".
DIV pop-up: Aparecer
código referente ao link da DIV Seguidora!
Observações: Para implementar a pop-up numa página específica do Blogger, seja ela página de postagem ou página estática, você poderá adicionar os códigos simultaneamente no html da postagem do Blogger.
Para adicionar o conteúdo em todo o blog, isto é, abrir em todas as páginas que alguém acessar, basta você inserir aquele Gadget HTML/JAVASCRIPT.
O código também funciona normalmente se você inseri-lo no HTML de quaisquer blogs de outras plataformas.
Se você tiver alguma dúvida ou sugestão, deixe abaixo nos comentários.
Marcadores: Dicas para blogs, javascript