1![[TUTORIAL] Criando sua própria POPUP! Empty](https://2img.net/i/empty.gif)
[TUTORIAL] Criando sua própria POPUP! 09/01/13, 11:21 am
HenRyqUéè
Administrador
Avaliador
Helper
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | [TUTORIAL] Criando sua própria POPUP! |
| [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] |
|
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Criando sua própria POPUP!
[TUTORIAL] Criando sua própria POPUP!
1º - Adicionando o codigo JAVAScript...
Vá em:
Título * : Dê qualquer título ao código;Módulos > HTML e JavaScript > Gestão do código JavaScript >> Novo JavaScript
Investimento : Marque "No índice e no Portal";
Código JavaScript * : Cole o code abaixo:
PHPBB3:
- MOSTRAR O CODIGO:
- Código:
$(document).ready(function(){
$(".navbar").after("<div id='popup' style=''></div>");
$("#popup").html('<div id="X">X</div>'+'<center><b style="font-size:16px">CONTEUDO DA POPUP</b>'+'<br><b style="font-size:8px;opacity:0.6;">Feito por HenRyqUéè</b></center>');
$("#X").click(function(){
$("#popup").fadeOut();
$(this).remove();
});
});
PUNBB:
- MOSTRAR O CODIGO:
- Código:
$(document).ready(function(){
$("#pun-head").after("<div id='popup' style=''></div>");
$("#popup").html('<div id="X">X</div>'+'<center><b style="font-size:16px">CONTEUDO DA POPUP</b>'+'<br><b style="font-size:8px;opacity:0.6;">Feito por HenRyqUéè</b></center>');
$("#X").click(function(){
$("#popup").fadeOut();
$(this).remove();
});
});
Salve!
2º - Adicionando o código CSS...
Vá em:
Cole o seguinte code na folha:Visualização > Imagens e Cores > Cores >> Folha de Estilo CSS
- MOSTRAR O CODIGO:
- Código:
/*www.rmbr.forumeiros.com*/
/*popup*/
#popup{right:188px;
box-shadow:9px 8px 20px grey;
border-radius:9px;
height:80px;
cursor:pointer;
width:300px;
position:fixed;
right:420px;
padding:13px;
border:3px solid black;
color:white;font-weight:bold;
background-color: #DEDEDE;
background:-moz-linear-gradient(#9DE8AF,#00751B);
background-image: -webkit-linear-gradient(#9DE8AF,#00751B);
}
#X{
border:1px solid #0C5E03;
cursor:pointer;border-radius:3px;
width:8px;height:8px;padding-right:3px;
padding-left:3px;padding-bottom:8.5px;border:1px solid black;color:white;background-color:#65C45A;font-weight:bold
}
#X:hover{
background:green;color:white;
}
Valide!
3º - Resultado/Exemplo...
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Lembrando que você pode editar o estilo da popup ao seu gosto!
Lembrando que você pode editar o estilo da popup ao seu gosto!
- Funciona em quais versões?
PHPBB3 e PUNBB
© RMBR & SPDesign
| [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [DÚVIDA] Criando sua própria POPUP! |
Destaque do Fórum