Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 HenRyqUéè

avatar
Membro
Criando sua própria POP-UPOlá pessoal, nessa aula eu vou mostrar como fazer seu próprio popup, aquela janelinha que flutua na página.
Versões de funcionamento: PunBB e PhpBB3.

- Adicionando o código 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:
Código:
$(document).ready(function () {
  /* TUTORIAL = http://staffergroupbr.stuning.net/t961- */
  $(".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();
  });
});
Salve!

PUNBB:
Código:
$(document).ready(function () {
  /* TUTORIAL = http://staffergroupbr.stuning.net/t961- */
  $("#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:
Código:
/*Pop-up */
#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;
}
/* TUTORIAL = http://staffergroupbr.stuning.net/t961- */
Valide!

- Resultado/Exemplo...





© Staffer Group BR™
PRECISA DE SUPORTE?

Criador: HenRyqUé / RMBR / SPDesign
Site: www.staffergroupbr.stuning.net
Ver perfil do usuário

#2
 D'Leandro™

avatar
Fundador
Aceito: Movido para o local correspondente.
Ver perfil do usuário

#3
 Diskete

avatar
Membro
Bacana, mas não me impressiona muito, acho que isso em um fórum não é tão necessário. Me impressionara se aparece-se em uma página especifica. Mas não desse jeito.
Ver perfil do usuário

#4
 Bookmarlucas654

avatar
Membro
Eu vou testar o código, mas achei legal o view '-'
Ver perfil do usuário

#5
 HenRyqUéè

avatar
Membro
fala ai Bookmarlucas654 brigadão, qq coisa se eu postar um novo tuto no spdesign eu posto aqui tb. E leandro, quanto ao formulário, vc nao me meu mais informações, já esta concluido? se sem fale resolvido no teu pedido, vlw...
Ver perfil do usuário

#6
 D'Leandro™

avatar
Fundador
HenRyqUéè ainda não está resolvido, mas eu estou um pouquinho sem tempo para lhe passar as mudanças!

Aguar por favor.
Ver perfil do usuário

#7
 Patrão

avatar
Membro
Hum...Est tutorial parece ser muito bom!Vou ver ele
Ver perfil do usuário

#8
 Narutofake

avatar
Membro
elgal, vou utiliza=lo em meu forum :D
Ver perfil do usuário

#9
 Master Publicitario

avatar
Membro
Muito bom, vou testar obrigado!
Ver perfil do usuário

#10
 Daemon

avatar
Fundador
Bem simples =]'
Ver perfil do usuário

#11
 azure

avatar
Membro
Muito bom, vou testar obrigado!
Ver perfil do usuário

#12
 Conteúdo patrocinado