popup(window/ dialog)

1. window 메서드
1)open
window.open(url, name, option) 을 이용.

전체코드(예시)

$.ajax({
	   type: 'POST',
	   url: '/setSessionNo',
	   ontentType: 'application/json',
	   data: JSON.stringify({
	   no: rowid
	   }),
	   success: function() {
							
	   $.get('detail.do', function(data) {
	    /* popup 띄우기*/
          	var url = "detail.do"
          	var name = "popup test";
          	var option = "width = 1200, height = 600, top = 100, left = 200, location = no"
			window.open(url, name, option);
			});
	    }
});

2)close
window.opener -> window.close() 를 이용.
1) url을 이동할시 window.opener.location.href='url';
2) url 변경시 window.opener.$('body').load('url');
-> window.close()

전체코드(예시)

$("#btnBoardList").click(function(e){
	e.preventDefault();
	window.opener.$('body').load('board'); 
	window.close();	
});

2. Jquery dialog 메서드
1)open
이동할 url을 입력해주고 url이 들어간 dialog 함수를 호출.

전체코드(예시)

/* dialog 함수 */
var url = 'detail.do';
var dialog = $('<div id="dialog-form"></div>').dialog({
	appendTo: 'body',
	autoOpen: false,
	width: 1200,
	height: 600,
	title: '상세보기',
		
	// 모달 다이얼로그로 생성
	modal: true,
	// 다이얼로그 열기 콜백            
	open: function () {            	     	
	// 내용을 불러옴.                
	$(this).load(url);            
	},
	// 다이얼로그 닫기 콜백
	close: function(e) {
		$('body').load('board');
		dialog.dialog("close");
	}
});

여기에서 dialog를 호출
success: function() {
	$.get('detail.do', function(data) {
		dialog.html(data); // Dialog 내용 변경
		dialog.dialog("open"); // Dialog 열기
	});
}

2)close
$('body').load('url') -> dialog.dialog("close"); 를 이용.

전체코드(예시)

$("#btnBoardList").click(function(e){
	e.preventDefault();
	
   /* dialog 방식 */
	$('body').load('board');
	dialog.dialog("close");
});

dialog를 사용할때 getScript를 이용해서 사용하면 js파일을 직접 참조할 수 있음. 하지만 기초가 되는 js에서 전역함수를 선언해야할 수도 있고, 다른 js에서도 전역함수를 선언해야 하는 경우가 생김