Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Snowden

Popup flutuante

Por , em Javascript

Recommended Posts

Snowden    94

Snowden
Postado

SALVE HO EU DE NOVO xD

Descolei um script de uma popup da hora... mais queria acressentar nesse escript um outro código que fizese a janela popup se mover conforme o cara rola a página, tipo seguindo ela.

 

código popup

<html>
<title></title>
<style type="text/css">
#popup{
position: absolute;
top: 5%;
left: 5%;
width: 595px;
height: 310px;
padding: 10px 10px 10px 10px;
border-width: 2px;
border-style: solid;
background: #FFFFFF;
display: none;
}
</style>
<body onLoad="javascript: abrir()">
<script language="javascript" type="">
// Função que fecha o pop-up ao clicar no link fechar
function fechar(){
document.getElementById('popup').style.display = 'none';
}
// Aqui definimos o tempo para fechar o pop-up
function abrir(){
document.getElementById('popup').style.display = 'block';
}
</script>
<DIV id="popup" class="popup">
<center><img src="imgs/venda.png">
<a href="www.link.com"><img src="imgs/venda2.png"></a></center>
<br></br>
<small><a href="javascript: fechar();"><img src="imgs/fechar.gif"></a></small>
</DIV>
</body>
</html>

 

se alguém puder ajudar ou indicar uma popup com as características q eu citei acima agradeço

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

mais simples desenvolver um do zero qndo é assim.

 

aqui eu fiz:

http://www.wbruno.com.br/blog/2011/03/23/div-centralizada-verticalhorizontal-fixa-rolagem-da-janela/

 

sendo javascript e não php, procure postar no forum correto.

[Movido]

Compartilhar este post

Link para o post
Compartilhar em outros sites

Snowden    94

Snowden
Postado

ESSE SEU CÓDIGO EU COLOCO NO QUE EU TENHO ?

 

var marginTopoInicial;//criando variavel de escopo global  
window.onload = function(){  
   calcMarginTop();  
   marginTopoInicial = parseInt( getMarginTop( id('main') ) );//recuperando o marginTop inicial  
}  
window.onscroll = function(){  
   id('main').style.marginTop = marginTopoInicial+window.pageYOffset+'px';//levando em conta o scroll  
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

não.

 

veja os 2 posts. Esse trecho que você copiou é complemento do outro post.

 

esqueça completamente o teu codigo atual, se for usar o meu.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Snowden    94

Snowden
Postado

William, Como faço para por uma função que feche a popup ao clicar no link "fechar" e outra função que o popup feche automaticamente ???

 

<html>  
<head>  
<script type="text/javascript">  
function id( el ){  
   return document.getElementById( el );  
}  
var marginTopoInicial;//criando variavel de escopo global  
window.onload = function(){  
   calcMarginTop();  
   marginTopoInicial = parseInt( getMarginTop( id('main') ) );//recuperando o marginTop inicial  
}  
window.onscroll = function(){  
   id('main').style.marginTop = marginTopoInicial+window.pageYOffset+'px';//levando em conta o scroll  
}  
window.onresize = function(){  
   calcMarginTop();  
}  
function calcMarginTop()  
{  
   var main = id('main');  
   var marginTopo = parseInt( getMarginTop( main ) );  
   var marginBaixo = parseInt( getMarginBottom( main ) );  

   if( main.offsetTop < -1 )  
       main.style.marginTop = '-'+( parseInt( main.offsetTop ) - marginTopo )+'px';  
   else if( marginTopo!=marginBaixo )  
   main.style.marginTop = '-248px';  
}  
function getMarginTop( el )  
{  
   if( window.getComputedStyle )  
       return document.defaultView.getComputedStyle(el, null).marginTop;  
   else if( el.currentStyle )  
       return el.currentStyle['marginTop'];  
}  
function getMarginBottom( el )  
{  
   if( window.getComputedStyle )  
       return document.defaultView.getComputedStyle(el, null).marginBottom;  
   else if( el.currentStyle )  
       return el.currentStyle['marginBottom'];  
}  
</script>  
<style type="text/css">  
* { margin: 0; padding: 0; }  
#main {  
   border: 1px solid #000;  
  width: 600px;
height: 300px;
   top: 45%;  
   left: 45%;  
   margin-top: -250px;  
   margin-left: -250px;  
   position: absolute; 
background: #FFFFFF; 
}  
</style> 
</head>  
<body>  
   <div id="main">  
 <a href="javascript: ?????? ">fechar</a>
   </div><!-- /main -->  
</body>  
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

o popup, é a div #main.

 

o teu fechar, só tem que dar um display: none; nessa div.

 

para o 'automaticamente', é a mesma coisa. Basta depois de um tempo, use o window.setTimeout() para isso, esconder o #main.

 

 

simples e básico, tente fazer. Estude.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito