[Tutorial] Cadastro em lightbox

Nome do Arquivo: [Tutorial] Cadastro em lightbox
Autor: Daemon
Funcionalidade: Todas as versões
Categoria: Recursos BestSkins

Neste tutorial estarei ensinando a adicionar um botão de cadastro, para que o cadastro seja feito através de uma pop up.

1º - Crie um novo Widget
Painel de controle Módulos Portal & Widgets Gestão dos Widgets do fórum Criar um Widget personalizado
Nome do widget: Cadastro em pop up
Utilizar um table type: Não
Tìtulo do widget: Cadastro em pop up
Fonte do widget:

Código:

<div id="box-reg" style="display: none;">
     <div class="reg-popup">
<span class="box-header"> Cadastre-se </span>
<form action="/register?agreed=true&step=2" method="post" class="frm-form" name="post" id="form_confirm">
<span class="close-box" onclick="jQuery('#box-reg').fadeOut();">
<img src="http://i81.servimg.com/u/f81/18/07/42/17/close_11.png"></span><br>
<span class="box-span"><span> Username:</span> 
<input type="text" name="username" placeholder="Username"></span><br>

<span class="box-span"><span> Email:</span> 
<input type="text" name="email"></span><br>

<span class="box-span"> Password:
<input type="password" name="password"></span><br>

<span class="box-span"> Localização*:
<input type="text" id="profile_field_13_-11" name="profile_field_13_-11" placeholder="De onde você é?"></span><br>

<span class="auto-box">
<input type="submit" name="submit" id="submit" value="Salvar"> &nbsp;<input type="reset" value="Reiniciar"></span>
</form></div></div><div class="button-reg">
<span>
<a href="/register" onclick="jQuery('#box-reg').fadeIn();return false;">Cadastre-se</a></span>
</div>
<style>
.button-reg {
background: #EEE;
border: 1px solid #DDD;
padding: 5px 8px;
position: fixed;
bottom: 0;
right: 0;
}
.button-reg a {color: #232323 !important;}
#box-reg {
background: rgba(0,0,0,0.59);
bottom: 0;
display: none;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 999;
}
.reg-popup {
background: #fcfcfc;
border: 5px solid #232323;
height: 300px;
left: 34%;
padding: 10px;
position: absolute;
top: 25%;
width: 360px;
}
.reg-popup form {
color: #000;
position: relative;
}
.box-header {
color: #232323;
font-size: 18px;
font-weight: bold;
margin: 0;
padding: 0;
}
.close-box {
cursor: pointer;
position: absolute;
right: -3px;
top: -18px;
}
.box-span {
float: left;
margin-top: 20px;
width: 360px;
}
.box-span input {
float: right;
height: 28px;
margin-right: 5px;
text-indent: 5px;
background: #fcfcfc;
border: 1px solid #c5c5c5;
box-shadow: 2px 2px 5px -1px rgba(0,0,0,0.5);
padding: 1px 3px;
width: 250px;
}
.box-span input:focus {
background: #fff;
border: 1px solid #232323;
box-shadow: 2px 2px 5px -1px rgba(0,0,0,1);
}
.auto-box input {
background: #e9e9e9;
border: 1px solid #bbb;
border-radius: 4px;
box-shadow: inset 0 10px 10px #f1f1f1;
color: #6f6f6f;
cursor: pointer;
font-family: "Trebuchet MS",Helvetica,sans-serif;
font-size: 12px;
margin-top: 13px;
margin-bottom: 4px;
padding: 5px 10px;
text-shadow: 0 1px #fff;
}
</style>

Lembre-se de que todos os campos personalizados que forem obrigatórios deverão ser colocados dentro da div da pop up... por exemplo o de localização:

Código:

<span class="box-span"> Localização*:
<input type="text" id="profile_field_13_-11" name="profile_field_13_-11" placeholder="De onde você é?"></span>

Se quiser adicionar um novo campo, procure pelo código acima e adicione o novo campo abaixo dele. Lembre-se de colocar o id do campo. O id do de localização por ex:

Código:

profile_field_13_-11

Lembre-se também de colocar o Widget somente para convidados.


Qualquer dúvida em relação a este tutorial, crie um tópico de mesmo nome.

Excelente amigo, ótima idéia!!!

Muito obrigado por compartilhar,

JS

JScript escreveu:Excelente amigo, ótima idéia!!!

Muito obrigado por compartilhar,

JS

A ideia foi do Doki, só fiz o código através da ideia dele '.

Gostei do resultado

Reputado o/

Emo *--*
Vlw pelo código

Oh my goood >.<

Daemon tu é foda brother p.p

Legal '--'
Curti e.e

Interessante ;D
Vou fazer umas modificações!

Obrigado

E será que tinha como colocar em todo o fórum? Assim, ao clicar em qualquer 'CADASTRE-SE', com o link /register, abrir esta popup flutuante, como tem um código aqui no BS sobre 'Logar-se'. Será que poderia deixar em todo o fórum em vez de apenas num único botão?

Genial.

abraços!

Belo tutorial!