MODAL 팝업 윈도우 호출
doModalPopupWindow 은 window.showModalDialog 를 활용한 팝업 윈도우를 호출하는 공통함수입니다.
사용법은 함수를 호출할 때, 팝업을 호출할 url을 설정하거나, url 및 팝업의 크기를 설정하여 사용합니다.
예제코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
/************************************************************************
함수명 : doModalPopupWindow
설 명 : MODAL 팝업 윈도우 호출
사용법 : doModalPopupWindow("/admin/code/first_Popup_CodeList.do");
doModalPopupWindow("/admin/code/first_Popup_CodeList.do", 1000, 555);
************************************************************************/
function doModalPopupWindow(mUrl, mWidth, mHeight){
var w = 575;
var h = 310;
var url = mUrl;
if(mUrl == null){
alert("팝업 URL이 설정되지 않았습니다.");
return false;
}
if(mWidth != null){
w = mWidth;
}
if(mHeight != null){
h = mHeight;
}
//showModalDialog 설정
var param = new Object();
var feature ="dialogWidth:"+w+"px; dialogHeight:"+h
+"px;scroll:no;status:no;resizable=no;center:yes;location:no;";
//dialog 호출
return window.showModalDialog(url , param, feature);
}
|
활용 예제 #1 (메인화면)
메인화면에서 팝업을 호출하는 함수 fn_popup()를 호출하여, MODAL 팝업 윈도우를 호출합니다. 호출한 후, 팝업의 결과값은 returnValue 값으로 받아서 처리하도록 하였습니다.
1
|
<input id="STN_ID" readonly="true" onclick="javascript:fn_popup();" />
|
1
2
3
4
5
6
7
8
|
//팝업
function fn_popup(){
var returnValue = doModalPopupWindow("/wpDisClct/disClctSkpDtl/DisClctSkpDtl_Popup_ReadList.do");
if(returnValue){
jQuery("#STN_ID").val(returnValue.STN_ID);
}
}
|
활용 예제 #2 (팝업화면)
팝업 윈도우에서는 값을 전달하기 위한 Object를 생성하여 window.returnValue 에 설정한 후, self.close()를 통해 팝업 윈도우가 닫히도록 구현합니다.
1
2
3
4
5
6
7
8
9
|
//선택값 입력창으로 전달
function ondblClickRow(rowid){
var returnValue = new Object();
returnValue.STN_ID = rowid;
window.returnValue = returnValue;
self.close();
}
|
테스트
화면에서 돋보기 버튼을 클릭하여 팝업을 호출합니다.
팝업 윈도우가 나타나면 목록에서 항목을 더블클릭합니다.
팝업이 닫히고, 팝업으로 부터 전달받은 returnValue 값이 메인화면에 설정됩니다.
댓글 없음:
댓글 쓰기