jquery를 이용한 레이어 가운대 띄우기 (중앙정렬, 멀티레이어, 가운데 위치 자동조절)

jquery를 이용하여 마스크를 현재 창 전체로 씌운 다음 가운데로 원하는 레이어를 띄워주는 함수입니다. 그 외 창 사이즈를 조절하면 자동으로 레이어의 위치도 가운데로 다시 정렬되며, 레이어를 띄운 상태에서 다른 레이어를 또 띄우게 되면 기존 레이어 위에 마스크와 새로운 레이어를 다시 띄우게 됩니다.
미리 보기에서 구현된 내용을 미리 확인해 보세요.

<script type="text/javascript">
//레이어 가운데 띄우고 마스크 띄우기
function toggleLayer( obj, s ) {

    var zidx = $("#lay_mask").css("z-index");

    if(s == "on") {
        //화면중앙에 위치시키기
        var left = ( $(window).scrollLeft() + ($(window).width() - obj.width()) / 2 );
        var top = ( $(window).scrollTop() + ($(window).height() - obj.height()) / 2 );

        // 높이가 0이하면 0으로 변경
        if(top<0) top = 0;
        if(left<0) left = 0;

        var layer_idx = Number(zidx) + 10;

        $("#lay_mask").css("z-index", layer_idx);

        obj.css({"left":left, "top":top, "z-index":layer_idx}).addClass("PopupLayer");
        $("body").append(obj);

        wrapWindowByMask();//배경 깔기
        obj.show();//레이어 띄우기
    }

    if(s == "off") {
        if($(".PopupLayer").length > 1) {
            var layer_idx = zidx - 10;
            $("#lay_mask").css("z-index", layer_idx);
        } else {
            $("#lay_mask").hide();
        }

        obj.removeClass("PopupLayer").hide();
    }

    if(s == "off2") { //레이어에서 다른 레이어를 띄울 경우 마스크는 안닫기 위한 처리
        obj.removeClass("PopupLayer").hide();
    }
}

//마스크 띄우기
function wrapWindowByMask() {

    var mask = $("#lay_mask");

    //화면의 높이와 너비를 구한다.
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

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

// 사이즈 리사이징
function ResizingLayer() {

    if($("#lay_mask").css("display") == "block") {
        //화면의 높이와 너비를 구한다.
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

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

        $(".PopupLayer").each(function () {
            var left = ( $(window).scrollLeft() + ($(window).width() - $(this).width()) / 2 );
            var top = ( $(window).scrollTop() + ($(window).height() - $(this).height()) / 2 );

            if(top<0) top = 0;
            if(left<0) left = 0;

            $(this).css({"left":left, "top":top});
        });
    }
}

window.onresize = ResizingLayer;
</script>

<style type="text/css">
#lay_mask {
   position:absolute;
   background:black;
   z-index:100;
   opacity:0.5;
   filter:alpha(opacity=50);
   background:rgba(0,0,0,.5);
   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000)
}
.PopupLayer { position: absolute; z-index: 110; }
</style>

<div id="lay_mask" style="display: none;"><!-- 마스크로 띄워질 Div --></div>