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, 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>