$('.jsShowModal').click(function(e){
            e.preventDefault();
            $('#login').addClass('active');
        });

        $('#login').on('click', function(e) {
            if (!$(e.target).closest('#modalBox').length){
                $('#login').removeClass('active');
            }
        });

#login{
visibility: hidden;
opacity:0;

position: fixed;
top:0;
left:0;
width:100%;
height: 100vh;
background: rgba(0,0,0,0.3);
z-index: 11121111111;
visibility: hidden;
opacity:0;
transition:.3s ease;

#modalBox{
    display: block;
    position: absolute;
    @include center;
    padding: 40px 40px 20px 40px;
    margin-left:135px;
    background:$white;
    text-align: center;
    border-radius: 10px;
}
    &.active{
        visibility: visible;
        opacity:1;
    }
}   

震えるほど懐かしいのでメモ

http://www.w3schools.com/howto/howto_css_modals.asp