[Tutorial] Cadastro em lightbox

Ir em baixo

[Tutorial] Cadastro em lightbox

Mensagem por JQuery em Sab Mar 01, 2014 8:38 pm



Cadastro em lightbox

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


--> Tutoriais, dicas e astúcias <--
Cadastro em lightbox



- Título
Painel de controle :arrow:Módulos seta Portal & Widgets :arrow:Gestão dos widgets do fórum :arrow: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">  <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:?
    Lembre-se também de colocar o widget somente para convidados.





© Web Design


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Cadastro em lightbox



Staff - Web Design



 Cumpra as regras do forum e seja um bom membro.
 Conheça a nossa equipe staff.
 Antes de criar sua publicação leia as regras da seção de publicidade.
 Antes de pedir uma análise do seu site, tenha em mente as regras da seção.
 Cada seção é sustentada por suas próprias regras, leia atentamente antes de atuar.
avatar
JQuery
Administrador
Administrador

Mensagens : 142
Localização : Penafiel
Reputação : 26
Barra de respeito às regras :

Ver perfil do usuário http://webdesign.forum-pro.net

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

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