Compartilhando informação

Pop-up css e javascript

Este tutorial mostro como construir uma pop-up que não seja bloqueada pelos browsers (navegadores de internet) usando css e javascript.

<style type=“text/css”> e </style> é a marcação CSS da pop-up deve ser modificada de acordo com o seu uso.

<script language=“javascript”> e </script> é a marcação do javascript da pop-up que tambem deve ser alterado de acordo com o seu uso

Para entender o código é simples necessita o minimo de conhecimento de css e javascript, e basta ler os comentários que vai te ajudar muito.

<head>

<style type=“text/css”>
/* cria a div pop-up*/
#popup{
position: absolute; /*Define a posição absoluta da pop-up*/
top: 30%; /*Distancia da margem superior da página */
left: 30%; /*Distancia da margem esquerda da página */
width: 300px; /*Largura da pop-up*/
height: 100px; /*Altura da pop-up*/
padding: 20px 20px 20px 20px; /*Margem interna da pop-up*/
border-width: 1px; /*Largura da borda da pop-up*/
border-style: solid; /*Estilo da borda da pop-up*/
background: #ccc; /*Cor de fundo da pop-up*/
color: #000066; /*Cor do texto da pop-up*/
display: none; /* Estilo da pop-up*/
/*fim pop-up*/
}
</style>

<script language=“javascript”>
// Função que fecha o pop-up ao clicar no botao fechar
function fechar(){
document.getElementById(‘popup’).style.display = ‘none’;
}
// Aqui definimos o tempo para fechar o pop-up automaticamente
function abrir(){
document.getElementById(‘popup’).style.display = ‘block’;
setTimeout (“fechar()”, 3000);
}
</script>

</head>
<body onLoad=“javascript: abrir()”>

<div id=“popup” class=“popup”>
<b> Web tecnology </b>
<p>
Esse é um exemplo de popup utilizando DIV. Dessa maneira esse
pop-up não será bloqueado.

</p>
<small><a href=“javascript: fechar();”>X ou fechar</a></small>
</div>
<br> <a href=“javascript: abrir();”>Abrir Pop-up</a>
<br> <a href=“javascript: fechar();”>Fechar Ppo-up</a>

</body>
</html>

Comentários em: "Pop-up css e javascript" (33)

  1. ola pessoal ainda nao testei, mas gostaria de saber qndo a pessoa fechar, gostaria de direcionar para uma pag, ou um anuncio adsence, alguem sabe como fazer isso e onde coloco o cod

    Curtir

Gostou Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Informática gratuita para você.

Compartilhando informação

Cartões com Arte

Um novo conceito em cartões. facebook.com/cartoescomarte.

Nouvelle vie au Canada

Casal em busca do seu sonho de morar no Canadá

Informática Gratuita

Compartilhando informação

Red Dreams

Quem disse que meus sonhos não podem ser vermelhos?

%d blogueiros gostam disto: