Class: AXModal

AXModal

모달창을 생성하고 제어 합니다. 모달창은 window, iframe, div 세 가지로 생성할 수 있습니다.

new AXModal()

Version:
  • v1.40
Author:
  • tom@axisj.com

Extends

Methods

staticAXModal.close()

오픈된 모달 창을 닫습니다.

Type Description
String

modalID

Example
myModal.close("modalDiv01");
parent.myModal.close(); // iframe 모달창을 오픈한 경우 열려진 iframe 안에서 호출 합니다.

staticAXModal.loaded()

모달의 로딩중 상태를 강제로 로드 완료 처리 합니다.

Example
myModal.loaded();
parent.myModal.loaded(); //iframe 모달창을 오픈한 경우 열려진 iframe 안에서 호출 합니다.

staticAXModal.open()

iframe 을 내장하는 모달 창을 오픈합니다.

Type Description
Object

configs

Example
var configs = {
    url: {String} - 모달창의 URL,
    pars: {(Object|Array)} - 모달창 URL 에 전달 될 파라미터,
    method: {String} ["post"] -파라미터 전달방식,
    top: {Number} [scrollTop + 100] - 모달창 포지션 top,
    width: {(String|Number)} - 모달창 너비,
    closeByEscKey: {Boolean} [false] - 모달창 닫기를 esc 키로 닫을 지 여부,
    closeButton: {Boolean} [true] - 모달창 닫기버튼의 노출 여부
}
myModal.open(configs);

staticAXModal.openDiv()

div 모달 창을 오픈합니다.

Type Description
Object

configs

Example
var configs = {
    modalID: {String} - 모달창의 식별자,
    targetID: {String} - 모달창 타켓 엘리먼트 아이디,
    top: {Number} [scrollTop + 100] - 모달창 포지션 top,
    width: {(String|Number)} - 모달창 너비,
    closeByEscKey: {Boolean} [false] - 모달창 닫기를 esc 키로 닫을 지 여부,
    verticalAlign: {Boolean} [false] - 모달창 가운데 표시 여부,
    closeButton: {Boolean} [true] - 모달창 닫기버튼의 노출 여부
}
myModal.openDiv(configs);

staticAXModal.openNew()

새로운 창으로 모달 창을 오픈 합니다.

Type Description
Object

configs

Example
var configs = {
    url: {String} - 새창 오픈 URL,
    pars: {(Object|Array)} - 새창 오픈 URL 전달 파라미터,
    name: {String} ["mdw" + timekey]- 새창이름,
    options: {String} - 새창 오픈 옵션 window.open 속성과 동일합니다.
}
myModal.openNew(configs);

staticAXModal.remove()

오픈된 모달 창을 제거합니다.

Example
myModal.remove();
parent.myModal.remove(); //iframe 모달창을 오픈한 경우 열려진 iframe 안에서 호출 합니다.

staticAXModal.resize()

열려진 iframe modal 의 높이를 iframe 창의 높이 만큼 리사이즈 합니다. contentDivClass 가 정의된 경우 contentDivClass 높이값으로 resize 합니다.

Example
myModal.resize();
parent.myModal.resize(); //iframe 모달창을 오픈한 경우 열려진 iframe 안에서 호출 합니다.

staticAXModal.setConfig(modalConfig)

모달의 기본 환경설정값을 셋팅합니다.

Name Type Description
modalConfig Object
Example
var myModal = new AXModal();
var modalConfig = {
    animateDuration: {Number} [300],
    contentDivClass: {String} ["bodyHeightDiv"] - iframe 모달의 창이 오픈된 경우 iframe 의 높이를 정확히 제어하기 위해 컨텐츠 전체를 감싸는 대상에 지정한 className 값,
    defaultTop: {Number} [10] - 모달창 포지션 top,
    displayLoading: {Boolean} [true] - 모달이 오픈될 때 로딩 표시 여부,
    maskCss: "AXMask" - 배경 mask div의 css,
    opendModalID: {String} - 모달 ID,
    padding: {(String|Number)} ["0"] - 모달 padding 값,
    viewMode: {String} ["dx"],
    width: {(String|Number)} - 모달의 기본 너비,
    windowBoxCss: {String} ["AXModalBox"] - 모달을 감싸는 제일 바깥쪽 div의 css,
    windowID: {String} ["AXModal" + timekey] - 모달 식별 아이디,
    onclose: {Function} - 모달창이 닫힐 때 이벤트,
    closeButton: {Boolean} [true] - 모달창 닫기버튼의 노출 여부
};
myModal.setConfig(modalConfig);

staticAXModal.setWidth()

모달의 기본 너비 속성을 변경하고 창이 열려있는 상태이면 동적으로 창의 크기도 변경합니다. (단, openDIV 로 모달이 오픈된 경우는 해당사항 없음)

Type Description
String | Number

모달의 기본 너비 pixel({Number}) or percent({String})

Example
myModal.setWidth(800);
myModal.setWidth("80%");