MODAL

HOMEWORKS 팝업 컴포넌트.

Summary

MODAL은 HOMEWORKS에서 사용 할 수 있는 가장 일반적인 형태의 컴포넌트 입니다.

HOMEWORKS STYLE에 맞는 MODAL 엘리먼트를 정의하고,

JAVASCRIPT를 통해 해당 엘리먼트를 호출하는 형태로 MODAL을 사용하실 수 있습니다.

Usage

• HTML

    <div class="modal default-modal">
        <div class="modal-header">
            <h2>DEFAULT MODAL</h2>
            <a href="#" class="btn-close">
                <i class="pe-7s-close"></i>
            </a>
        </div>
        <div class="modal-body">
            <div class="guide">
                MODAL BODY CONTENTS
            </div>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-sm btn-default">CANCEL</a>
            <a href="#" class="btn btn-sm btn-primary">OK</a>
        </div>
    </div>
  

• JAVASCRIPT

    // Initialize Modal
    var $modal = $('.default-modal').modal();
  
    // Show Modal
    $modal.modal('show');
  
    // Hide Modal
    $modal.modal('hide');
  

• VIEW HOOK

  <!-- 
  ================================================================
  VIEW HOOK은 HOMEWORKS에서 제공하는 HTML 속성 확장을 이용하기 때문에,
  JAVASCRIPT를 생략할 수 있습니다.
  ================================================================
  -->
  <a href="#" class="btn btn-block btn-force btn-lg" data-modal="true" data-pen="{selector}">OPEN MODAL</a>
  

Functions

Modal

• Type: Function
• Description: Modal을 초기화하는 함수.

• Arguments:

  • element: Element
  • options: Object(optional)

• Options:

  • animation: boolean
    • Description: Modal이 나타날 때 애니메이션을 적용할지 여부 (True: 적용, False: 미적용).

• Example:

  $(function() {
    var options = {
        ...
    };
    var $modal = $('.default-modal');
    $modal.modal(options);
  });
  

Modal.method.toggle

• Type: Method
• Description: Modal show/hide toggle 함수.

• Arguments:

  • element: Element

• Example:

  $(function() {
    var $modal = $('.modal');
    $modal.modal('toggle');
  });
  

Modal.method.open, Modal.method.show(alias)

• Type: Method
• Description: Modal 화면표시 메소드.

• Arguments:

  • element: Element

• Example:

  $(function() {
    var $modal = $('.default-modal');
    $modal.modal('show');
  });
  

Modal.method.close, Modal.method.hide(alias)

• Type: Method
• Description: Modal 화면숨김 메소드.

• Arguments:

• element: Element

• Example:

    var $modal = $('.modal');
    $modal.modal('hide');
  

Modal.method.update

• Type: Method
• Description: Modal의 위치 및 해상도 업데이트 메소드.

• Arguments:

• element: Element

• Example:

    $(function() {
        var $modal = $('.modal');
        $modal.modal('update');
    });
  

Events

Modal Button 요소에 클래스를 아래와 같이 기입하면, Modal 엘리먼트에 이벤트가 제공됩니다.

modal.submit

• Description: 확인/적용 등의 버튼에서 해당 클래스를 제공하시기 바랍니다.
• Event: modal.submit
• Bind Selector: .btn-submit

• Example:

  • HTML

    <div class="modal default-modal">
        <div class="modal-header">
            <h2>DEFAULT MODAL</h2>
            <a href="#" class="btn-close">
                <i class="pe-7s-close"></i>
            </a>
        </div>
        <div class="modal-body">
            <div class="guide">
                확인버튼을 클릭하시기 바랍니다.
            </div>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-sm btn-primary btn-submit">확인</a>
        </div>
    </div>
    

  • JAVASCRIPT

    var $modal = $('.default-modal');
    $modal.modal('show');
    $modal.on('modal.submit', function() {
        alert('Modal is submitted.');
    });
    

modal.cancel

• Description: 취소/종료 등의 버튼에서 해당 클래스를 제공하시기 바랍니다.
• Event: modal.cancel
• Bind Selector: .btn-cancel

• Example:

  • HTML

    <div class="modal default-modal">
        <div class="modal-header">
            <h2>DEFAULT MODAL</h2>
            <a href="#" class="btn-close">
                <i class="pe-7s-close"></i>
            </a>
        </div>
        <div class="modal-body">
            <div class="guide">
                취소버튼을 클릭하시기 바랍니다.
            </div>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-sm btn-danger btn-close">취소</a>
        </div>
    </div>
    

  • JAVASCRIPT

    var $modal = $('.default-modal');
    $modal.modal('show');
    $modal.on('modal.cancel', function() {
        alert('Modal is canceled.');
    });
    

View Hook

MODAL 컴포넌트는 컨트롤 버튼에 대한 View Hook을 제공합니다.

View Hook이 걸려있는 버튼을 클릭하면 pen 연결 된 Modal이 toggle됩니다.

Attribute - modal

• Value: <any>
• Description: null, undefined외 값을 지정 권장.

Attribute - pen

• Value: <Element> [Target Modal Element Selector]
• Description: 버튼을 클릭할 때 토글될 Modal 엘리먼트의 셀렉터를 정의.

Example

• HTML

  <a href="#" class="btn btn-block btn-force btn-lg"
    data-modal="true"
    data-pen="{selector}"
    >
    OPEN MODAL
  </a>