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();
    });

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

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

        fnCloseDlg();
    });

    // popup dialog & change offset
    openDialog('#dlg_create_user')
        .offset({ left: 50, right: 30 });
        // .offset({ x: 50, y: 30 });
        // .offset(50, 30);
})();

<!-- NOTE: background는 반드시 dialog 이전(prev) 위치에 있어야 한다. -->
<div class="mu-dialog-background hidden"></div>
<div class="mu-dialog hidden" id="dlg_create_user">
    <div class="mu-dialog-head">
        <span class="title">Create new user</span>
        <button type="button" class="mu-btn mu-btn-icon mu-btn-bg-non btn-close"><i class="mu-icon cancel"></i></button>
    </div>
    <div class="mu-dialog-body">
        <p>All form fields are required.</p>
        <button type="button" id="popup_02">popup 2</button>
    </div>
    <div class="mu-dialog-foot">
        <button type="button" class="mu-btn mu-pop-btn mu-btn-icon btn-yes"><i class="mu-icon add"></i>create an account</button>
        <button type="button" class="mu-btn mu-btn-icon btn-close"><i class="mu-icon cancel"></i>cancel</button>
    </div>
</div>

functions

openDialog(String selector, Function yesCallback, Function closeCallback)

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

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

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

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

chain functions

openDialog 함수는 객체를 반환하여 추가 동작을 할 수 있게 도와줍니다.

offset([Object offset])

지정한 객체의 left(or x)와 top(or y) 값에 따라 element의 위치를 변경합니다.
JQuery의 offset 메서드와 동일한 동작을 수행하며, 인자를 지정하지 않으면 offset 객체를 반환합니다.

또한, 객체 대신 아래와 같이 숫자 2개를 인자로 지정하여 호출할 수도 있습니다.

var left = 30;
var top = 30;
openDialog('#dlg_create_user').offset(left, top);