뒤로가기로 레이어 닫기 구현
일단 정리는 했는데... 이해하는건 나중에 -____________________-
상단 전역변수
var oldURL = location.href;
var oldHash = location.hash;
액션 1 . 리스트에서 레이어를 띄움 pop_open(글번호) 수행
function pop_open(movieNo){
location.hash = "story/" + movieNo;
}
액션 2 . location.hash 가 수행되면 아래 메서드 수행
$(window).on('hashchange', function (e) {
var hash = location.hash;
if( hash == "#_" || hash == "" ){ //팝업 닫기로 접근한 경우 액션 5
var regEx = /#([a-zA-z]+)\/([0-9]+)*/i;
var match = oldHash.match(regEx);
if( match ){
var category = match[1];
if( category == "story" ){
$("#green_view").hide();
$('body').css({overflow:'auto'});
}
}
}else{ // pop_open() 이 실행되는경우 액션 2
getData();
}
});
액션 3 location.hash에 저장된 값으로 DB 호출 메서드 실행
function getData(){ //액션 3 location.hash에 저장된값으로 DB 호출 메서드 실행
var hash = location.hash;
oldHash = hash;
var regEx = /#([a-zA-z]+)\/([0-9]+)*/i;
var match = hash.match(regEx); //math 값은 --> 형식으로 저장 ["#story/119", "story", "119"]
if( match ){
var category = match[1];
var id = match[2];
if(category == 'story'){
storyView(id); // 액션4 DB 호출
}
}
}
액션 4 DB 호출 영역 refer
function storyView(movieNo){ // 액션 4 DB 호출 영역
if(movieNo != null){
$("#movieNo").val(movieNo);
$.ajax({
url : "/intro/storyView.do",
type : 'get',
data : $("#frm").serialize(),
complete: function(httpReq) {
$("#boardDetailDiv").html(httpReq.responseText);
$("#cateChangeYn").val("N");
}
});
$("#green_view").show();
$("#green_view").css("top", $(window).scrollTop());
$('body').css({overflow:'hidden'});
$('#green_view').scrollTop(0);
}else{
alert("게시물이 없습니다.");
return;
}
}
액션 5.
function pop_close(){
location.hash = "_";
}
$(window).on('hashchange', function (e) {
var hash = location.hash;
if( hash == "#_" || hash == "" ){ //팝업 닫기로 접근한 경우 액션 5
var regEx = /#([a-zA-z]+)\/([0-9]+)*/i;
var match = oldHash.match(regEx);
if( match ){
var category = match[1];
if( category == "story" ){
$("#green_view").hide();
$('body').css({overflow:'auto'});
}
}
}else{ // pop_open() 이 실행되는경우 액션 2
getData();
}
});