JQuery Login div

Question

I'm trying to make a JQuery Login div. You just have to click a button, then, a background of 100% width/height appears with a center div... I could make it appears and dissapears giving it a class and displaying... But I want some animations... It doesn't work :(

HTML5

<div id="background_login">
        <div id="login_container">
            <div class="container"><a id="cerrar_login" class="btn"><span class="icon close"></span></a></div>
            <div class="formulario">
                <h1>Acceso</h1>
                <form action="" method="POST">
                    <input type="text" id="nombre_usuario" placeholder="Usuario" />
                    <input type="password" id="password" placeholder="Contraseña" />
                    <input type="submit" id="boton_conectar" value="Conectar" class="btn" />

                    <a>¿Has olvidado la contraseña?</a>
                    <a>Regístrate ahora</a>
                </form>
            </div>
        </div>
    </div>

CSS3

    #background_login {
    background: rgba(0, 0, 0, 0.2);
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 99999;
}

#login_container {
    background-color: #FFF;
    border-bottom: 4px solid #252328;
    height: auto;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 20%;
    width: 20%;
}

#login_container .container {
    background-color: #252328;
    height: 50px;
    width: 100%;
}

#login_container .container a {
    border-left: 1px solid #FFF;
    height: 50px;
    position: absolute;
    right: 0;
    width: 50px;
}

#login_container .container a:hover { background-color: #EA504E; }

#login_container .container a:hover span {
    -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
            transform: rotate(360deg);
}

#login_container .container a span {
    background-image: url("../images/menu.svg");
    background-position: 0 -16px;

    -webkit-transition: -webkit-transform .30s ease-out 0s;
            transition: transform .30s ease-out 0s;
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
}

#login_container .formulario {
    height: auto;
    padding-top: 20px;
    padding: 50px;
    width: auto;
}

#login_container .formulario h1 {
    color: #333;
    font-family: CaviarDreams_Bold;  
    font-size: 2em;
}

#login_container .formulario input {
    display: block;
    font-family: CaviarDreams_Bold;
    margin: 20px;
    margin-left: 0;
    padding: 12px;
    padding-right: 0;
    width: 94%;
}

#login_container .formulario input:focus { border-color: #252328; }

#login_container .formulario #boton_conectar {
    background-color: #252328;
    color: #FFF;
    font-family: CaviarDreams_Bold;
    font-size: 0.9em;
    padding: 0;
    width: 100%;
}

#login_container .formulario a {
    display: block;
    font-family: CaviarDreams_Bold;
    font-size: 0.9em;
}

#login_container .formulario #boton_conectar:hover { background-color: #EA504E; }

And the Jquery function... you click in the button and the background appears with the div inside...

$('#login').click(function() { $('background_login').fadeIn('slow'); });
$('#cerrar_login').click(function() { $('background_login').hide( 1000 ); });

The two lines of jQuery look to be OK. Are they wrapped in a `$(function() {...})` structure? — Roamer-1888, Feb 24 '15 at 00:11
The selector `$('background_login')` is incorrect. It should be `$('#background_login')`, based on your markup. — Palpatim, Feb 24 '15 at 00:22

score 0 · Answer 1 · answered Feb 24 '15 at 00:25

0

maybe this..

 $('#background_login').fadeIn('slow'); 
 $('#background_login').hide( 1000 );

answered Feb 24 '15 at 00:25

deadkff01

41
3

score 0 · Accepted Answer · answered Feb 24 '15 at 01:10

0

There is no #login provided with your html, seems you may need to create it. But, your fade selectors are definitely incorrect.

$(function() {
    $('#login').on('click', function() { 
        $('#background_login').fadeIn('slow'); 
    });
    $('#cerrar_login').on('click', function() { 
        $('#background_login').hide( 1000 ); 
    });
});

answered Feb 24 '15 at 01:10

EternalHour

8,308
6
38
57

My button #login is created, but I didnt posted it (too many code) P.D.: The difference between: .click(function () ) and on('click', function ()) ??? – Antonio Feb 24 '15 at 07:41
The difference is in the way the elements are bound and event handlers are designated. See this question: http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click – EternalHour Feb 24 '15 at 09:38

JQuery Login div

2 Answers2