[JS] 페이지 레이어 팝업

딱히 이걸 뭐라고 해야 하는 지 모르겠다;
퀵매뉴 처럼 옆에 붙어 있다가 누르면 나와서 페이지 전체에 보여주는 팝업이다.
처음에는 fixed로 옆에 붙어서 따라다니다가 레이어를 펼치면
absolute로 성격을 바꾸고 기존 wrap는 숨긴다.
와이드 모니터를 사용하는 사람들에게는...유용할듯?



<style type="text/css">
.layOutAd{position:fixed;top:0;left:50%;z-index:9999;min-width:100%;min-height:100%;margin-left:638px;}
.layOutAd .layOutWrap{position:relative;min-width:100%;min-height:100%;}
.layOutAd .layOutWrap #layBtnAd{display:block;width:64px;height:234px;position:absolute;top:50%;cursor:pointer;text-indent:-9999px;}
.layOutAd .layOutWrap .off{left:-64px;margin-top:-117px;background:url("오프이미지") no-repeat 0 0;}
.layOutAd .layOutWrap .on{left:0;margin-top:-117px;background:url("온이미지") no-repeat 0 0;}
</style>


<script type="text/javascript">
jQuery( document ).ready(function(){
jQuery("#layBtnAd").live("click", function(){
layOutLeft();
});
});


function layOutLeft(){
var layBtnClass = jQuery("#layBtnAd").attr("class");

var left = "0";
var marginLeft = "0";
var removeClass = "off";
var addClass = "on";

jQuery(".layOutAd").css("position","absolute");
jQuery("#wrap").fadeOut("slow");
jQuery("html").scrollTop("0");

if(layBtnClass == "on"){
left = "50%";
marginLeft = "638px";
removeClass = "on";
addClass = "off"; 
jQuery(".layOutAd").css("position","fixed");
jQuery("#wrap").fadeIn("slow");
} 

jQuery(".layOutAd").animate({left:left,marginLeft:marginLeft}, {duration: 1500});
jQuery("#layBtnAd").removeClass(removeClass);
jQuery("#layBtnAd").addClass(addClass);
}
</script>

<div id="wrap">페이지</div>
<div class="layOutAd">
<div class="layOutWrap">
<div>컨텐츠</div>
<p class="off" id="layBtnAd">열기/닫기</p>
</div>
</div>