Olá bolinhos de arroz
Como vão? Como passaram a semana? Estão jogando bastante? Sim sim, hoje eu estou feliz. Reabriram meu RPG depois de um protesto por MP \o/ Ahuehuehue
Tirando isso, a única novidade que tenho é que vou começar minhas aulas dia 10 ¬3¬ Invejem-me -nn.
Enfim, hoje eu trouxe um tutorial do Teddy ensinando a como personalizar seu PopUp.
Clique aqui para ver um exemplo.
1. 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á no pop-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:
<div
style="background-color:#6599A4; display: block; height: 353px; width:499px; z-index: 100; left: 283px; top: 171px; position: absolute;"id="parada" align="center"><div style="text-align: right;"><a href="javascript: void(0)"onclick="document.getElementById('parada').style.display ='none';">[FECHAR]</a></div>Algo aqui tuts tus<br><br>Escreva algo aqui, tuts tus~<br>Podemos também colocar uma imagem no pop-up. Veja:<br><br><img style="width: 211px; height: 131px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoGf3Qk1uvCf-CxhtjFeGEBxJripq1g2JQowEmCffdGcXxQZx-uxjIM7pkq4eg_scjJm5dQPx6HFfBpW3EO7iSs1tgVU_RF56gZJ2cwhChT4GE-_mzf04K9Kid7oXDGoeUz-Nf5qw7EIQ/s200/yun_334.jpg"><br></div>
Ou seja, você deverá colar este código fazendo as devidas modificações depois da tag <b: skin>, no seu HTML.
2. Cole o seguinte código num gadget HTML/JavaScript:
<ahref="javascript:void(0)"onclick="document.getElementById('parada').style.display='block';">Exibirpop-up</a>
Informações adicionais:
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 idda nossa primeira Div é 'Parada'.
Nenhum comentário:
Postar um comentário