[jQuery][CSS] 간단한 모달Modal 열기

<div id="js-intro">
    <div class="inner">모달창</div>
</div>

#js-intro { display:none; position:absolute; z-index:99998; top:0; left:0; background:rgba(0,0,0,0.5); text-align:center; }
#js-intro .inner { display:none; position:relative; z-index:99999; width:400px; height:200px; margin:0 auto; text-align:center; }

$(document).ready(function(){
    $("#js-intro").appendTo("body");
    //화면의 높이와 너비를 구한다.
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    var winHeight = $(window).height(); // inner 위치설정용

    //마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
    $('#js-intro').css({'width':maskWidth, 'height':maskHeight});

    //애니메이션 효과 - 천천히 나타남
    $('#js-intro').fadeIn(800, function(){
        $('#js-intro .inner').fadeIn(1000).css({'top':(winHeight/2)+'px', 'transform':'translateY(-50%)'});
    });

    // 닫기
    $("#js-intro .inner").click(function(){
        $('#js-intro').hide();
    });
});

모달창 : 클릭하면 닫힙니다.