Diễn Đàn Game - Forum Game Private | GamePrivate.Biz

Xin Chào

[code] login style metro

Share
    avatar

    Tổng số bài gửi : 9

    Giới tính : Male

    Gold : 29

    Cảm Ơn : 2

    Ngày Tham Gia : 2014-07-09

    Post by zzlasperpen on 09/07/14, 12:00 pm



    Cho vào overall_header
    Code:
    <!-- 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- -->
    như thế này

    cho vào Js inall_pages
    Code:
    /**
     * 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 //
    });
    CSS
    Code:
    /*----------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}
    cho code vào chỗ cần hiện
    Code:
    <a herf="/login" id="simple_link" name="modal" rel="#loginModal">Login here</a>