Rpg Maker BRasil
RPG Maker Brasil - RMBR

Seja Bem vindo ao Forúm! Faça seu cadastro e desfrute sobre o mundo do RPG Maker!
P.S.: PARA MELHOR VIZUALIZAÇÃO DO FORUM SEM BUGS, RECOMENDO QUE USEM O MOZILLA FIREFOX OU O GOOGLE CHROME!
Rpg Maker BRasil

Evoluindo cada vez mais!


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

HenRyqUéè

avatar
Administrador
Avaliador
Helper

[Você precisa estar registrado e conectado para ver esta imagem.]

[TUTORIAL] Criando sua própria POPUP!

Olá pessoal, nessa aula eu vou mostrar como fazer seu próprio popup (aquela janelinha que flutua na página).


[Você precisa estar registrado e conectado para ver esta imagem.]
CRÉDITOS!

HenRyqUé
- Criador do code / SPDesign & RMBR
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Criando sua própria POPUP!


- Adicionando o codigo JAVAScript...
Vá em:

Módulos > HTML e JavaScript > Gestão do código JavaScript >> Novo JavaScript
Título * : Dê qualquer título ao código;
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!


- Adicionando o código CSS...
Vá em:

Visualização > Imagens e Cores > Cores >> Folha de Estilo CSS
Cole o seguinte code na folha:

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!


- Resultado/Exemplo...
[Você precisa estar registrado e conectado para ver esta imagem.]
Lembrando que você pode editar o estilo da popup ao seu gosto!

  • Funciona em quais versões?
    PHPBB3 e PUNBB




© RMBR & SPDesign


[Você precisa estar registrado e conectado para ver 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!

http://rmbr.forumeiros.com/

Montillo

avatar
Designer
Bacana.. ja COnsegui Ele Deixa Quadrado

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum