dialog

개요

dialog의 기능과 사용법에 대해 설명하는 문서입니다.

• [뒤로 가기(사용자 설명서)](사용자 설명서)

dependencies

없음

예제

/**
*
*/
(function () {
    'use strict';

    // popup dialog (default)
    openDialog('#dlg_create_user');

    // popup dialog (ok btn click event)
    openDialog('#dlg_create_user', function clickOKBtn(fnCloseDlg) {
        // something...

        fnCloseDlg();
    });

    openDialog('#dlg_create_user', function clickOKBtn(fnCloseDlg) {
        // something...

        fnCloseDlg();
    }, function clickCancelBtn(fnCloseDlg) {
        // something...

        fnCloseDlg();
    });
})();

functions

openDialog(String selector, Function yesCallback, Function closeCallback)

JQuery selector에 해당하는 문자열을 인자로 입력받아 element를 화면에 띄웁니다.
이 때 element는 화면 크기를 기준으로 가로로는 정 중앙, 세로로는 2/3 지점에 자동 배치됩니다.

두 번째 인자로 입력하는 callback 함수는 다이얼로그의 "확인" 버튼을 눌렀을 때 호출됩니다.
세 번째 인자로 입력하는 callback 함수는 다이얼로그의 "취소" 버튼을 눌렀을 때 호출됩니다.
"확인" 버튼은 btn-yes 클래스를 가지고 있다고 가정합니다.
"취소" 버튼은 btn-close 클래스를 가지고 있다고 가정합니다.

또한, 다이얼로그를 수동으로 닫을 수 있는 함수를 반환하여
확인 버튼을 누른 이후 다이얼로그를 닫는 시점을 제어할 수 있습니다.

만약 두 번째 인자나 세 번째 인자를 입력하지 않은 상태에서
"확인" 혹은 "취소" 버튼을 누르면 다이얼로그가 바로 닫힙니다.