CSS
BASICO – PARTE 03 – SIMULANDO
UM POPUP COM CSS EM UMA DIV
Um popup pode ser visto como sendo uma sub janela de navegador que se
abre sobre uma janela. Em algumas situações ele pode ser útil para
divulgação de informações que mereçam destaque. No entanto, tal
recurso acabou sendo explorado de forma inadequada por pessoas mal
intencionadas, o que levou muitos navegadores a fazer o seu bloqueio
automático. Como alternativa pode-se simular a criação de um popup
com CSS. A diferença é que ao invés dele ser aberto em uma nova
janela do navegador, ele pode ser
aberto e fechado usando-se DIV em uma posição específica dentro da
página HTML por meio de links que utilizam eventos JAVASCRIPT.
Exemplo:
|
<html>
<head>
<meta
charset=utf-8>
<title>usando
DIV como POPUP</title>
<style>
#pop
{
background:
black; /*cor de fundo*/
border:5px
solid red; /*cria bordas*/
display:none;
/*cria DIV invisivil*/
position:fixed;
/*posicionamento fixo*/
top:50%;
/*distância do topo*/
left:50%;
/*distância da margem esquerda*/
margin-left:-200px;
/*centraliza na horizontal*/
margin-top:-150px;
/*centraliza na vertical*/
padding:10px;
/*cria margens dentro da DIV */
width:400px;
/*largura da DIV*/
height:300px;
/*altura da DIV*/
}
</style>
</head>
<body>
<DIV
id="pop">
<a
href="#"
onclick="document.getElementById('pop').style.display='none';"
style='text-decoration:none'>
<font
color=yellow face=arial size=5><div
style='text-align:right'><b>X</div></a></font>
<font
color=white>PopUp feito com CSS e DIV.
</DIV>
<h1><a
href="#"
onclick="document.getElementById('pop').style.display='block';">Abrir
PopUp</a></h1>
</body>
|
Observe que no exemplo dado, margin-left e margin-top são
respectivamente metade de width e height, isso possibilita que a DIV
fique centralizada horizontalmente e verticalmente na tela. O comando
display:none deixa a DIV e todo o seu conteúdo invisível até que o
link com instrução JavaScript
onclick="document.getElementById('pop').style.display='block';"
receba um clique, voltanto a ficar invisível caso o link com a
instrução JavaScript
onclick="document.getElementById('pop').style.display='none';"
também receba um clique.
Os comandos CSS foram relacionados a DIV por meio de ID, sendo assim,
só podem ser utilizados uma única vez. Para relacionar tais
comandos a várias DIVs, basta utilizar CLASS, substituindo o simbolo
cerquilha(#) por um ponto final(.) antes do nome “pop”,
acrescentando class=’pop’ na criação da DIV. Feito isso, será
necessário, também, substituir a chamada em JAVASCRIPT por
"document.getElementsByClassName('pop')[0].style.display='block';"
para abertura da DIV e
"document.getElementsByClassName('pop')[0].style.display='none';"
para fechamento da DIV. Observe que para cada nova chamada deve ser
acrescentado um índice numérico entre colchetes[], conforme exemplo
que segue:
|
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta
charset=utf-8>
<title>usando
DIV como POPUP</title>
<style>
.pop
{
background:
black; /*cor de fundo*/
border:5px
solid yellow; /*cria bordas*/
display:none;
/*cria DIV invisivil*/
position:fixed;
/*posicionamento fixo*/
padding:10px;
/*cria margens dentro da DIV */
top: 10px;
left:
15px;
width:95%;
/*largura da DIV*/
height:90%;
/*altura da DIV*/
overflow:auto;
/* cria uma barra de rolagem na div se necessário */
}
</style>
</head>
<body
bgcolor=lightblue>
<center><h1>PENSAMENTOS<hr></h1>
<DIV
class="pop">
<a
href="#"
onclick="document.getElementsByClassName('pop')[0].style.display='none';"
style='text-decoration:none'>
<font
color=yellow face=arial size=5><div
style='text-align:right'><b>X
</div></a></font>
<font
color=white size=7>Ser estudioso é o maior ato de rebeldia
contra um sistema que explora os menos favorecidos.</font>
</DIV>
<DIV
class="pop">
<a
href="#"
onclick="document.getElementsByClassName('pop')[1].style.display='none';"
style='text-decoration:none'>
<font
color=yellow face=arial size=5><div
style='text-align:right'><b>X</div></a></font>
<font
color=white size=7>Todo ponto de vista é vista de um ponto.
Todo ponto de vista tem seu ponto.</font>
</DIV>
<h1><a
href="#"
onclick="document.getElementsByClassName('pop')[0].style.display='block';">Poder
do estudo</a></h1>
<h1><a
href="#"
onclick="document.getElementsByClassName('pop')[1].style.display='block';">Ponto
de vista</a></h1>
</body>
|
Observe
que, neste segundo exemplo, o código CSS tem menos comando, no
entanto, foi acrescentando o comando overflow:auto;
que
cria uma barra de rolagem na DIV se necessário. Uma outra dica
interessante, seria acrescentar após o comando de cor background:
black; o comando
background-color:
rgba(0, 0, 0, 0.8);
que possibilita criar uma DIV transparente, usando os sistema de
cores RGB
+ A
(camada Alpha
– camada de transparência). Neste sistema o primeiro zero
representa tons de vermelho(Red),
o segundo tons de verde(Green)
e o terceiro tons de azul(Blue),
que podem variar de 0 a 255. Já o 0.8 representa o índice de
transparência desejado.
ATIVIDADES
1) Aumente o tamanho da DIV em 200
pixels mantendo-a centralizada na tela.
2) Crie um efeito de fundo degrade
com até três cores para a DIV.
3) Faça com que a DIV tenha um
sombreamento a direita.
4) Crie links para três poemas e
faça com que eles sejam exibidos em DIVs contendo a mesma formatação
CSS.
|
Créditos:
artigo redigido em outubro de 2016 – Professor Roni Márcio Fais
– Todos os direitos reservados a www.rmfais.com.
|
