Colocar Resposta 
 
Avaliação do Tópico:
  • 1 votos - 5 Média
  • 1
  • 2
  • 3
  • 4
  • 5
[tutorial] Como fazer uma popup (nivel intermédio) - Em divs!
02-01-2010, 13:38 (Esta mensagem foi modificada pela última vez a: 03-01-2010 15:49 por asantos3.)
Mensagem: #1
[tutorial] Como fazer uma popup (nivel intermédio) - Em divs!
Bem este tutorial é dedicado ao Marco Monteiro, que teve a brilhante ideia de perguntar como fazer uma popup...
Bem aqui vai o tutorial...

Linguagens a dominar para isto:
  • Css (Se quiserem, algum style)
  • Html (Recomendável)

1 - Por o seguinte na head (entre as tags <head></head>)
Citar:<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" type="text/css" href="thickbox.css">
Puderam por o seguinte código a seguir ao que está em cima ou num ficheiro .js:
Citar: <script type="text/javascript">
$(document).ready(function(){
if ($.cookie('20080521') != '1') {
tb_show("<strong>Titulo!</strong>",
"#TB_inline?height=190&width=275&inlineId=mypopup","");
$.cookie('20080521', '1', { expires: 1 });
}
});
</script>

Nota: Se quiserem num ficheiro .js (actualização mais "dinâmica") deveram por apenas por:
Citar:$(document).ready(function(){
if ($.cookie('20080521') != '1') {
tb_show("<strong>Titulo!</strong>",
"#TB_inline?height=190&width=275&inlineId=mypopup","");
$.cookie('20080521', '1', { expires: 1 });
}
});

Guardando como exemplo.js e chamando o ficheiro num ficheiro html ou php desta forma:
Citar:<script type="text/javascript" src="exemplo.js"></script>

Após feito o primeiro passo que está em cima deveram:

2- Por o seguinte código entre as Tags <body></body>:

Citar:<div id="mypopup" style="display:none">
<p id="msg">
Exemplo de texto!
</p>
</div>

Notas Finais: Para modificar o "style" desta popup em div devera modificar estes dois ficheiros e linha de código:
  • thickbox.js - Neste ficheiro apenas para modificar o botão e/ou link e/ou imagem que irá fechar a popup, que está por omissão assim:
    close or Esc Key
  • thickbox.css - Nesta é que é preciso já alguma perícia nesta área, (na área do css), é neste ficheiro que irá mudar todo o style da popup...
  • A linha de código que poderá modificar é esta:
    Citar:tb_show("<strong>Titulo!</strong>",
    "#TB_inline?height=190&width=275&inlineId=mypopup","");
    Que com um pequeno dominio em html é muito fácil de perceber o que modificar...

Como mudar a permanência da popup:
Outras das caracteristicas que o Marco pergunto foi a "permanência" da popup, ele gostava que aparecesse só uma vez a popup,então vamos lá...

Para alterar o numero de dias que a popup aparece, alterar estas linhas de código:

Citar:if ($.cookie('20080521') != '1') {
Citar:$.cookie('20080521', '1', { expires: 1 });

Os numeros 1 equivale ao numero de dias em que a popup irá aparecer outra vez... Para isso é só alterar os 1 para o numero de dias... por exemplo para aparecer sempre é 0, para aparecer uma só vez na vida é 40000 (cem anos) ou mais...

Ficheiros:

jquery:
http://jquery.com/

jquery cookie:
http://plugins.jquery.com/project/cookie

thickbox:
http://jquery.com/demo/thickbox/

Exemplo:
Em anexo

------------------------------------------------
NOTA EDIT:
1 - No ficheiro em anexo adicionei para modo compativel, ou seja, pode extrair o .zip em programas como o 7zip
2 - Se testar no Chrome, teste num servidor Web...


Ficheiro(s) anexado(s)
.zip  exemplo.zip (Tamanho: 40,94 KB / Downloads: 55)

Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
02-01-2010, 18:53
Mensagem: #2
RE: [tutorial] Como fazer uma popup (nivel intermédio) - Em divs!
O ficheiro que tens em anexo está mal compactado....

Website: iCarneiro | Twitter: ycarneiro
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
02-01-2010, 18:59
Mensagem: #3
RE: [tutorial] Como fazer uma popup (nivel intermédio) - Em divs!
(02-01-2010 18:53)xOy Escreveu:  O ficheiro que tens em anexo está mal compactado....

Não tive problemas e fazer o download nem a ver o exemplo...
Mal compactado como?

Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
02-01-2010, 19:03
Mensagem: #4
RE: [tutorial] Como fazer uma popup (nivel intermédio) - Em divs!
Like this:

[Imagem: pplwareerror.th.png]


Também pensei que fosse do meu 7Zip, mas instalei o WinRar e continua com o mesmo problema....

Website: iCarneiro | Twitter: ycarneiro
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
02-01-2010, 19:08
Mensagem: #5
RE: [tutorial] Como fazer uma popup (nivel intermédio) - Em divs!
(02-01-2010 19:03)xOy Escreveu:  Like this:

[Imagem: pplwareerror.th.png]


Também pensei que fosse do meu 7Zip, mas instalei o WinRar e continua com o mesmo problema....

Testa ai com o Winzip sff... Eu testei aqui com o Winzip...

Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
02-01-2010, 19:12
Mensagem: #6
RE: [tutorial] Como fazer uma popup (nivel intermédio) - Em divs!
(02-01-2010 19:08)asantos3 Escreveu:  
(02-01-2010 19:03)xOy Escreveu:  Like this:

[Imagem: pplwareerror.th.png]


Também pensei que fosse do meu 7Zip, mas instalei o WinRar e continua com o mesmo problema....

Testa ai com o Winzip sff... Eu testei aqui com o Winzip...

Já tentei com o WinRAR e com o 7Zip... vais me obrigar a instalar o winzip só para testar isso....??!

Don't think so....

é mais facil compactares em rar de novo e fazeres novo upload.... ou então espera por uma 2ª opinião, visto que não crês na minha Tongue

Website: iCarneiro | Twitter: ycarneiro
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
02-01-2010, 19:13 (Esta mensagem foi modificada pela última vez a: 02-01-2010 19:18 por asantos3.)
Mensagem: #7
RE: [tutorial] Como fazer uma popup (nivel intermédio) - Em divs!
(02-01-2010 19:12)xOy Escreveu:  
(02-01-2010 19:08)asantos3 Escreveu:  
(02-01-2010 19:03)xOy Escreveu:  Like this:

[Imagem: pplwareerror.th.png]


Também pensei que fosse do meu 7Zip, mas instalei o WinRar e continua com o mesmo problema....

Testa ai com o Winzip sff... Eu testei aqui com o Winzip...

Já tentei com o WinRAR e com o 7Zip... vais me obrigar a instalar o winzip só para testar isso....??!

Don't think so....

é mais facil compactares em rar de novo e fazeres novo upload.... ou então espera por uma 2ª opinião, visto que não crês na minha Tongue

Pera, que já ponho em .rar ou .7zip
Baixa o exemplo.zip e ve se da o mesmo erro...

Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
03-01-2010, 02:36
Mensagem: #8
RE: [tutorial] Como fazer uma popup (nivel intermédio) - Em divs!
Ok!

Exemplo.zip está a funcionar Smile

Website: iCarneiro | Twitter: ycarneiro
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
03-01-2010, 15:35
Mensagem: #9
RE: [tutorial] Como fazer uma popup (nivel intermédio) - Em divs!
nao tinha posto em modo compatível Tongue

Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
Colocar Resposta 


Saltar Fórum:


Utilizadores a ver este tópico: 1 Visitante(s)