Modal Overlay Login Form UI Style

Nome do Arquivo: Modal Overlay Login Form UI Style
Autor: Mindlezz and Euan T
Funcionalidade: Todas as versões
Categoria: Recursos BestSkins

Este código vai fazer ter o seu próprio Overlay com  formulário de inscrição com estilo Metro UI

É customizável, então vamos ver como você pode ter este código ....

Clique em "Curtir" para ver o código HTML, o código JavaScript e CSS ....

Primeiro, vá para o seu Overall_Header modelo e adicione esse código no final:

[poll]

Código:


<!-- Inicio Modal Login Forum-->
<div id="panelguest">
<div id="mask"></div>
<div id="loginModal" class="modalBox loginModalBox">
    <div class="modalContent loginModalContent">
        <form action="/login" method="post" name="form_login">
      <div id="box">
        <div class="header50">
          <h4><img src="http://i.imgur.com/TAfxeMo.png" /></h4>
        </div>
          <h6><i class="fa fa-user"></i> USUARIO</h6>
          <input type="text2" name="username" value="Usuario" onfocus="if(this.value == 'Username') { this.value = ''; }" onblur="if(this.value=='') { this.value='Username'; }" placeholder="">
          <h6><i class="fa fa-key"></i> CONTRASEÑA</h6>
          <input type="password2" name="password" value="password" onfocus="if(this.value == 'password') { this.value = ''; }" onblur="if(this.value=='') { this.value='password'; }" placeholder="">
<h6> <label title="Si lo marcas, tu inicio de sesión se recordará en este ordenador, en otro caso, se finalizará la sesión al cerrar el navegador."><input type="checkbox" class="checkbox" name="remember" checked="checked" value="yes" /> Recordarme</label>  </h6>    
 <input class="botonlogin" type="submit" value="Ingresar" name="login">
        <input type="hidden" name="action" value="do_login" />
      </div>
    </div>
        </form>
    </div>
</div>
<!-- Fin Modal Login Forum- -->


[/poll]



Agora, depois de ter adicionado dar-lhe o ícone [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] e  e pronto, agora vamos adicionar o código Javascript, verificando em cada página, Escolher o nome está o seu eleição:

[poll]

Código:


/**
 * Modal Overlay Login Form UI Style
 *
 * @author Mindlezz and Euan T from MyBB
 * @version 1.0.1
 */


jQuery(document).ready(function($)
{
    // Make the jQuery modal login redirect you back to the page you're currently on //
    $('#loginModal input[name="url"]').attr("value", window.location);
    // /Login redirect //

    // Modal Boxes //
    $('a[name="modal"]').on('click', function(event)
    {
        event.preventDefault();
        
        var target = $(this).attr('rel');
        
        // Set up the shadowing
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({'width': maskWidth, 'height': maskHeight});
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow", 1);  
        
        // Position the actual modal
        var winH = $(window).height();
        var winW = $(window).width();
        $(target).css('top',  (winH / 2) - ($(target).height() / 2));
        $(target).css('left', (winW / 2) - ($(target).width() / 2));
        $(target).fadeIn(2000);
    });
    
    $('.modalBox a[rel="closeModal"]').on('click', function(event)
    {
        event.preventDefault();
        $('#mask, .modalBox').hide();
    });
    
    $('#mask').on('click', function ()
    {
        $(this).hide();
        $('.modalBox').hide();
    });
    // /Modal Boxes //
});


[/poll]


E agora é adicionar o estilo css que vai dar o Overlay:

[poll]

Código:


/*----------CSS MODAL OVERLAY LOGIN FORUM By Mindlezz and Euan T from MyBB ----------*//************************************************************************************/#mask{position:absolute;z-index:999;background-color:#47A4EC;display:none;top:0;left:0}

.modalBox{display:none;position:fixed;width:440px;z-index:999}

#box{border-radius:3px;height:auto;left:50%;margin:-150px auto 0 -170px;position:fixed;top:40%;width:350px}

.header50{height:90px;width:100%}

.header50 > h4{color:#8F95A1;font-family:'Lato',sans-serif;font-weight:300;margin:0;text-align:center;float:left;margin-left:-170px;margin-top:141px;border:1px solid #d1d1d1;padding:3px}

#box > h6{color:#fff;font-family:open sans;font-size:18px;font-weight:300;height:10px;margin:0;padding:21px 0;width:auto}

#box input[type="text2"],#box input[type="password2"]{border:medium none;color:#A9AFBD;font-family:'Lato',sans-serif;font-size:20px;font-weight:300;height:50px;padding:0 35px;width:100%}

#box input[type="text2"]:focus,#box input[type="password2"]:focus{border-left:3px solid #25689C;transition:border 0.2s ease 0s}

#box input[type="password"]{border-bottom:1px solid #EDEDED}

#box .botonlogin{background-color:#25689C;border:1px solid transparent;color:#FFF;display:block;font-family:open sans;font-weight:300;height:60px;margin:5px auto;transition:all 0.2s ease 0s;width:427px;font-size:17px}

#box .botonlogin:hover{border:1px solid transparent;background:none repeat scroll 0 0 #2E3539}



[/poll]


Agora, isso pode servir em qualquer link eo Modal podem aparecer, eles têm que fazer é agregarles o "name" e "rel" atributos: [codebox]name="modal"[/codebox]; [codebox]rel="#loginModal"[/codebox]  o link onde em que a ação é executada:

Por ejemplo:

Tenemos este link:

Código:

<a herf="/login" id="simple_link" >Login here</a>

Devemos acrescentar a esse link o atributo "name" com "modal", and "rel"  com "#loginModal", sendo da seguinte forma:

Código:

<a herf="/login" id="simple_link" name="modal" rel="#loginModal">Login here</a>


Y Así servirá al 100% el Overlay....

Se você tiver mais perguntas, publicá-las em Suporte ....

DEMO: [poll][Tens de ter uma conta e sessão iniciada para poderes visualizar este link] Denle click para al botón verde...


Para más info , entra a:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Muy bueno, a testear

[sucesso=Tutorial Aceito][/sucesso]

Wow me encanto,muy bueno amigo!

Gostei, vou testa-lo Obrigado.

Vamos testar.. [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

the best thinks good jobs man

Curtindo pra ver, é muito atraente, vou testar ...

Vamos testar.........