[JS] 모달 팝업 만드는 2가지 방법

1. ppmboot.config.js 에 경로 크기 지정 해줘야 함

수정 삭제 조회 등의 기능을 다 넣어야하면 필요함

    VIEW_FORM: function (caller, act, data) {
    	searchData = getSerializeArrayToJson("#searchView0");
    	
    	ppmboot.modal.open({
            modalType: MODAL_NAME,
            param: "",
            sendData: function(){
                return {
                	"mode" : "view",
                	"brandCd" : searchData.brandCd,
                	"cfmtnDlvyFromDt" : searchData.cfmtnDlvyFromDt,
                	"cfmtnDlvyToDt" : searchData.cfmtnDlvyToDt,
                	"company" : searchData.company,
                	"custCd" : searchData.custCd,
                	"lgscntrCd" : searchData.lgscntrCd,
                	"ecoFriCrtifYn" : searchData.ecoFriCrtifYn,
                	"itemSubCd" : data.itemSubCd
                };
            },
            callback: function (data) {
            }
        });
    },

▲화면 js

	PAGE_CLOSE: function (caller, act, data) { 
        if (parent) {
        	if (typeof param.callBack === "undefined"){
        		parent.ppmboot.modal.close();
        	}else{
        		parent.customModal.close();
        	}
        }
    },
    
    // 파라미터 전달방법 pageStrart에서
    param = parent.ppmboot.modal.getData();

▲모달 js 클로즈 함수(데이터 callback이 있을때)

            "HACCP000M": {
                width:1400,
                height: 780,
                iframe: {
                    url: "/jsp/haccp/modal/HACCP000M.jsp"
                },
                header: false
            },

▲ ppmboot.config.js

 

2. 한 화면에서 경로와 파라미터 넘겨주는 방법

//최상단에서 모달 재정의 Start
var customModal = new ax5.ui.modal({
	absolute: true,
	onStateChanged: function onStateChanged() {
	    if (this.state === "open") {
	        window.axMask.open();
	    } else if (this.state === "close") {
	        window.axMask.close();
	    }
	}
});

// 팝업 함수
	LMT_INFO : function (caller, act, data) {
		customModal.open({
			width : 1000,
			height : 600,
			iframe : {
	            method: "get",
	            url: "/jsp/haccp/modal/HACCP013M.jsp",
	            param: "prcsslmtId="+prcsslmtId,
			}
		});
    },

▲ 화면 js

	PAGE_CLOSE: function (caller, act, data) {
        if (parent) {
    		parent.customModal.close();
        }
    },
    
    // 파라미터 전달방법 pageStart에서
    param = ax5.util.param(ax5.info.urlUtil().param);

▲ 모달 js (callback 할 데이터 없을때)