|
<html>
<head>
<meta charset=utf-8>
<meta name="viewport"
content="width=device-width">
<title>usando div como popUp</title>
<!------ classe css
para criar div que escurece a página ------>
<style>
.popUp
{
background-image:
url('icone.png'); /*imagen de fundo transparente*/
background-color:
rgba(0, 0, 0, 0.6); /*fundo preto transparente*/
display:none; /*cria div
invisivil na página*/
position:absolute;
/*fixa div na tela*/
top:00px; /*distância
do topo*/
left:00px; /*distância
da margem esquerda*/
width:100%; /*largura da
div*/
height:1000px; /*altura
da div*/
}
</style>
<!------------------------------------------------------------->
</head>
<!------ definindo plano de fundo e cabeçalho da página
------->
<body bgcolor=gold>
<table width=100% bgcolor=darkblue><tr><td><b><center><font
color=white size=6>MODELO DE SITE COM HTML, CSS E
JAVASCRIPT</td></tr></table>
<center><p><br><p><br><p>
<!------------------------------------------------------------->
<!---------- criando divs que usam a classe css popUp
--------->
<div id="popUp01" class='popUp'>
<a href="#"
onclick="document.getElementById('popUp01').style.display='none';"
style="text-decoration:none; text-align:rigth;">
<font face=arial color=white size=7><div
style='text-align:right;
background:black;'><b>X</div></a></p></font>
<center><table border=1 bgcolor=white><tr><td
width=640 height=300><center><H1>conteúdo a ser
exibido na div</H1></td></tr></table>
</div>
<!------------------------------------------------------------->
<!-------- criando links que tornam as divs visíveis
---------->
<a href="#"
onclick="document.getElementById('popUp01').style.display='block';"><table
border=1 width=200 bgcolor=orange><tr><td><center><b>Abrir
DIV que esquerece tela</td></tr></table></a>
<!------------------------------------------------------------->
</body>
|
