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:
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

Comentando para ver

@AdminEdit! Cuidado, esse tipo de comentário é considerado flood!

Estava a procura desse código! =)

hum...não sei se ficara legal no meu forum mais bom trabalho XD

Nuss , Mt Foda :D Vou Por No Meu Forum ..

Uhum, bem manero!
Eu gostei bastante...

Ae, achei oque estava me matando pra achar, Thanks

muito bacana vou testar em meu forum

Muito Bacana mesmo,Parabéns,É Muito Útil e deixa os fóruns mais bonitos

Que massa!
Gostei muito deste efeito!

Espero que funcione!

Não funcionou, ajuda?

Voce deverá abrir um novo tópico para
pedir suporte.

Estava mesmo buscando este, o senhores deveria instala-lo novamente aqui!

Obrigado irei utilizar ele agora.

excelente, era o que eu procurava. tinha um com 3 coisas junto, mas bugava o resolve & block u.u

Muito bom, vou utiliza-lo agora mesmo

Ré-cometando para abrir. Aqui não aparece

Obrigado Por Compartilhar!

Excelente tutorial. Estarei re-pegando o código =P

legal msm