CSS jQuery Method & If statement, fade in modal

by Ian Roberts

HTML

<div class="login">Login</div>
<div class="overlay"><p>text</p></div>

CSS

* {
    padding:0;
    margin:0;
}
.overlay {
    position:absolute;
    top:0;
    left:0;
    width:100pc;
    height:100pc;
    background:#000;
    display:block;
    color:#000;
}

JavaScript

//single css property
//$('.overlay').css('background','rgba(0,0,0,.8)');

//multiple css properties

// .css( propertyName, value )


// .animate( properties [, duration ] [, easing ] [, complete ] )
if ($('.overlay').length) { 
    $('.overlay').css({
                        'background':'rgba(0,0,0,.8)',
                        'color':'#fad400'
                      });
    $(".overlay").hide().fadeIn(600);
    $(".overlay").click(function() {
        $(this).fadeOut(1000);
    });
}