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
 D'Leandro™

avatar
Fundador
Login em lightboxEste código faz com que ao clicar em 'login' o usuário veja uma caixa de login flutuante na tela, onde ele pode colocar seus dados de e logar-se no fórum. O título original deste código é "TGloginform with jQuery"
Versões de funcionamento: Todas as versões.

1º Passo - Estilo CSS
Para iniciarmos devemos ter o estilo instalado, então vamos até nossa página de estilos CSS e vamos coloca-lo la.
Código:
/* Login no Estilo Light Box */
#TGlogin_form {position: fixed;z-index: 999; height: 130px; padding: 0; verflow: auto;  width: 330px; margin: 0; background: #f9f9f9; color: #444; /* ©Copyright by giObanii.*/ text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);}
        .TGlogin_form-float-content{width: 320px; height: 120px; background: none repeat scroll 0% 0% transparent;}
        .TGlogin_form-float-div {background: url("http://i31.servimg.com/u/f31/17/41/76/40/2jci9c10.jpg") no-repeat scroll left center transparent;margin: 0 auto;padding: 20px 0 0 60px;width: 250px;}
        .TGlogin_form-float-div label {font-family: Verdana;display: block;font-size: 12px;padding-bottom: 5px;text-align: right;}
        .TGlogin_form-float-div label em {color: #000000;font-family: Verdana;display: block;float: left;font-style: normal;width: 80px;font-size: 12px;text-align: right;}
        .TGlogin_form-float-div input {border: 1px solid #CCCCCC;height: 22px;width: 146px;}
        .TGlogin_form-float-div input.submit {background: url("http://i31.servimg.com/u/f31/17/41/76/40/eumpmp10.jpg") repeat-x scroll 0 0 #DDDDDD;padding: 3px 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;border: 1px solid #BBB;float: right;height: auto;width: auto;}
        .TGlogin_form-float-div input.submit:active {position:relative; top: 1px;}
        .TGlogin_form-float-div input.submit:hover, .TGlogin_form-float-div input.submit:focus {cursor:pointer;color:#000;}
        .TGlogin_form-float_overlay{display: none;position:fixed;top: 0%;left: 0%;width: 100%;height: 100%; background-color: black;z-index: 9;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);}
        #TGlogin_form .TGClose {cursor: pointer;bottom: 3px;color: #000000;font-size: 15px;font-weight: 700;position: absolute;right: 5px;}
        #TGlogin_form .TGClose:active {color: #FF0000 !important;bottom: 2px;
}
/*---/ Creditos: 2012 © Staffer Group BR™ /---*/
/*---/  http://staffergroupbr.stuning.net /---*/

2º Passo - Funcionalidades
O código JavaScript é o responsável pelos movimentos e pela interatividade com o projeto.

Título * : Opcional
Investimento: Em todas as paginas
Código JavaScript * : Cole o código abaixo
Código:
$(function () {
  /* TUTORIAL = http://staffergroupbr.stuning.net/t742p20- */
  var tgl = document.getElementById('i_icon_mini_login');
  if (!tgl) return;
  var tgu = document.location.href;
  $('body').append('<div id="TGlogin_form" class="TGlogin_form-float" style="display: none;"><div class="TGlogin_form-float-content"><div class="TGlogin_form-float-div"><form  id="TGloginform" method="post" method="post" action="/login?redirect=' + tgu + '"><label><em>Login : </em><input id="username" type="text" name="username"></label><label><em>Senha : </em><input id="password" type="password" name="password"></label><label style="float: left; margin-top: 5px; text-align: left;"><em style="margin-right: 10px; margin-top: 3px; width: 85px; margin-left: 7px;">Lembrar da senha: </em><input type="checkbox" name="autologin" checked="true" style="width: 20px;"></label><input id="submit" type="submit" name="login" value="Entrar" class="submit"></form></div></div><span class="TGClose">X</span></div><div id="TGfade" class="TGlogin_form-float_overlay"></div>');
  var Copyrights = 'TGloginform with jQuery - ©Copyright by giObanii. ©Copyright by MTMY. All Rights Reserved.';
  $('a[href="/login"], a[href="/login?connexion"]').attr('href', '/login').click(function (e) {
    $('#TGlogin_form').fadeToggle('slow', 'linear');
    return false;
  }).click(function (e) {
    $('#TGfade').CSS('display', 'block');
    $('#TGlogin_form').CSS('left', '40%').CSS('top', '40%');
  });
  $('.TGClose').click(function () {
    $('#TGlogin_form, #TGfade').fadeToggle("slow", "linear");
  });
});


  • Resultado:






© Staffer Group BR™
PRECISA DE SUPORTE?

Criador: ToxiG33k™ / giObanii / MTMY
Site: http://staffergroupbr.stuning.net/t742p20-login-em-estilo-lightbox
Ver perfil do usuário

#2
 SD

avatar
Novato
Comentando para ver

@AdminEdit! Cuidado, esse tipo de comentário é considerado flood!
Ver perfil do usuário

#3
 Diskete

avatar
Membro
Estava a procura desse código! =)
Ver perfil do usuário

#4
 BielZinho

avatar
Membro
hum...não sei se ficara legal no meu forum mais bom trabalho XD
Ver perfil do usuário

#5
 » ƒαѕт ϟ

avatar
Membro
Nuss , Mt Foda :D Vou Por No Meu Forum ..
Ver perfil do usuário

#6
 JessiKa

avatar
Membro
Uhum, bem manero!
Eu gostei bastante...
Ver perfil do usuário

#7
 Kirito

avatar
Novato
Ae, achei oque estava me matando pra achar, Thanks
Ver perfil do usuário

#8
 Shion

avatar
Membro
muito bacana vou testar em meu forum
Ver perfil do usuário

#9
 LucasRPG

avatar
Membro
Muito Bacana mesmo,Parabéns,É Muito Útil e deixa os fóruns mais bonitos
Ver perfil do usuário lucasdearies@hotmail.com

#10
 dejanpetrus

avatar
Membro
Que massa!
Gostei muito deste efeito!
Ver perfil do usuário

#11
 SmackeD

avatar
Membro
estava precisando vlw
Ver perfil do usuário

#12
 Vir7uaL

avatar
Novato
Espero que funcione!
Ver perfil do usuário

#13
 Vir7uaL

avatar
Novato
Não funcionou, ajuda?
Ver perfil do usuário

#14
 Vargas

avatar
Moderador
Voce deverá abrir um novo tópico para
pedir suporte.
Ver perfil do usuário

#15
 ~[B]art

avatar
Membro
Estava mesmo buscando este, o senhores deveria instala-lo novamente aqui!
Ver perfil do usuário

#16
 'Fusion

avatar
Membro
Obrigado irei utilizar ele agora.
Ver perfil do usuário samuca_akira@hotmail.com

#17
 Bookmarlucas654

avatar
Membro
excelente, era o que eu procurava. tinha um com 3 coisas junto, mas bugava o resolve & block u.u
Ver perfil do usuário

#18
 eusouogoku

avatar
Membro
Muito bom, vou utiliza-lo agora mesmo
Ver perfil do usuário

#19
 Bookmarlucas654

avatar
Membro
Ré-cometando para abrir. Aqui não aparece
Ver perfil do usuário

#20
 DaViD-DaViD

avatar
Membro
Obrigado Por Compartilhar!
Ver perfil do usuário

#21
 Bookmarlucas654

avatar
Membro
Excelente tutorial. Estarei re-pegando o código =P
Ver perfil do usuário

#22
 JQuery

avatar
Membro
legal msm
Ver perfil do usuário

#23
 Conteúdo patrocinado