[Tutorial] Pop up de login

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

avatar
Admin
Administrador
Tempo Online : 250d 6h 21m 59s
Mensagens : 693
Reputação : 4
Ver perfil do usuário http://bestweb.forumais.com

MensagemAdmin em Seg Out 03, 2016 9:01 pm

Informações:

Autor: Daemon
Versões: Todas as versões
Introdução: Pop up de Login

Instalação:

Acesse:
Painel de controle ->> Modulos ->> Gestão dos widgets do fórum
Então crie um novo widget com esse código e marcado para apenas registrados:
Código:
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
 <a href="#" id="popupclose">
   <img src="http://i38.servimg.com/u/f38/17/31/71/58/icon_c10.png" class="cntrl" title="Fechar">
 </a>
 <h3>Bem Vindo ao <b>{FORUMNAME}</b></h3>
 <p>Para poder utilizar todos os atributos deste fórum, será necessário que você crie uma conta de uruário.<br /><br />O cadastro é gratuito e leva pouco tempo para ser preenchido.<br>Durante o cadastro, será requerida uma conta de e-mail válida. Isto é importante porque será necessária a validação do seu cadastro via e-mail.<br>
 </p>
 <br /><br />
 <center><a href="/register" title="Cadastre-se">Registre-se Agora!</a></center>
 <br />
<h3>Já está Cadatrado? Faça o Login!</h3>
<form action="/login" method="post" name="form_login" id="login">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td width="100%" align="right">
   <div align="center">
      <b>Usuário:</b> <input id="ips_username" type="text" class="input_text" name="username" size="15" tabindex="1">
      <b>Senha:</b> <input id="ips_password" type="password" class="input_text" name="password" size="15" tabindex="2">
      <input type="submit" name="login" class="input_submit" value="Logar">
   </div>
   </td>
  </tr>
 </table>
</form>
</div>
</div>
<script type="text/javascript">
jQuery('#popupclose').click(function() {
  jQuery('#fade, .popup_block').fadeOut('fast');return false;
});
if (location.pathname == '/login' || location.pathname == '/register') {
  jQuery('#fade, .popup_block').css('display','none');
}
</script>
<style type="text/css">
#fade {
background: #000;
position: fixed;
width: 100%;
height: 100%;
filter:alpha(opacity=80);
opacity: .30;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
/*--IE 8 Transparency--*/
left: 0;
top: 0;
z-index: 10;
}
#show {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.popup_block {
background: #ddd;
padding: 10px 20px;
border: 10px solid #fff;
float: left;
width: 480px;
position: fixed;
top: 20%;
left: 50%;
margin: 0 0 0 -250px;
z-index: 100;
}
.popup_block .popup {
float: left;
width: 100%;
background: #fff;
margin: 10px 0;
padding: 10px 0;
border: 1px solid #bbb;
}
.popup h3 {
margin: 0 0 20px;
padding: 6px 11px;
border-bottom: 1px solid #bbb;
font-size: 1.5em;
font-weight: normal;
}
.popup p {
padding: 5px 10px;
margin: 5px 0;
}
.popup img.cntrl {
position: absolute;
right: -20px;
top: -20px;
}
.input_text {
padding: 4px;
border-width: 1px;
border-style: solid;
border-color: #848484 #C1C1C1 #E1E1E1 #C1C1C1;
background: white;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.input_submit {
-moz-border-radius: 3px;
-moz-box-shadow: inset 0 1px 0 0 #5c5c5c, 0 2px 3px rgba(0,0,0,0.2);
-webkit-border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 0 #5C5C5C, 0 2px 3px rgba(0, 0, 0, 0.2);
background: #212121 url(http://i78.servimg.com/u/f78/17/31/71/58/topic_10.png) repeat-x top;
border-color: #212121;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: inset 0 1px 0 0 #5C5C5C, 0 2px 3px rgba(0, 0, 0, 0.2);
color: white;
cursor: pointer;
padding: 4px 10px;
text-decoration: none;
}
</style>

Resultado:

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

Cria uma conta ou logue para postar uma mensagem.

Você precisa ser um membro, para poder postar uma resposta.

Criar conta

Participe de nossa comunidade, basta se registrar. É Fácil!


Criar uma conta

Logar

Já tem uma conta? Sem problemas, Logue agora.


Logar-se

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