팝업

PopUp 개요

팝업 컨트롤을 사용하면 콘텐츠의 작은 오버레이를 응용 프로그램에 팝업 또는 모달 대화 상자로 추가할 수 있습니다. 팝업은 표시 여부를 제어하는 소유자 요소가 있는 팝업으로, 화면에 나타날 때 이러한 소유자 요소를 기준으로 배치됩니다. 반면 대화 상자는 소유자 요소가 없는 팝업으로 화면의 나머지 내용과 구분되어 화면 중앙을 향해 나타납니다.

CSS Transitions in Popup

팝업 컨트롤의 fadeIn 및 fadeOut 속성은 팝업이 표시되거나 숨겨질 때 간단한 애니메이션을 추가합니다.

표시되거나 숨겨진 이벤트에 응답하여 팝업의 호스트 요소에 클래스를 추가 및 제거하고 해당 클래스를 기반으로 애니메이션을 적용하는 CSS 규칙을 정의하여 사용자 지정 CSS 기반 애니메이션을 만들 수 있습니다.

아래 코드에서는 팝업 대화 상자로 표시하고 사용자 지정 애니메이션을 사용하여 열기/닫기 위해 로그인 양식을 만듭니다.

    <button style="margin:20px;" id="btnLogin" class="btn btn-primary">
    Log In
  </button>

  <!-- Log In form -->
  <form id="frmLogin">
    <h4 class="modal-header">
      Log in
      <button type="button" tabindex="-1" class="close wj-hide">&times;</button>
    </h4>
    <div class="modal-body">
      <label>
        Email:
        <input class="form-control" required type="email" />
      </label>
      <br />
      <label>
        Password:
        <input class="form-control" type="password" required pattern=".{4,}" title="Please enter 4 characters or more." />
      </label>
      <br />
      <label>
        Remember Me
        <input type="checkbox" />
      </label>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="submit">
        Log in
      </button>
    </div>
  </form>

/* CSS animations for fading in and out */

.custom-animation {
  opacity: 0;
  transform: rotate3d(1, .5, .5, 180deg) scale(0.1);
  transition: all ease-in .4s;
}

.custom-animation-visible {
  opacity: 1;
  transform: none;
}

import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';

function init() {
    let login = new input.Popup('#frmLogin', {
        fadeIn: false,
        shown: (sender) => {
            wijmo.toggleClass(sender.hostElement, 'custom-animation-visible', true);
        },
        hiding: (sender) => {
            wijmo.toggleClass(sender.hostElement, 'custom-animation-visible', false);
        }
    });
    //
    document.querySelector('#btnLogin').addEventListener('click', () => {
        login.show(true);
    });
}

Popup 대화상자

대화상자는 소유자 요소가 없는 팝업 컨트롤입니다. 사용자는 새 페이지나 View로 전환하지 않고도 정보를 입력하거나 편집할 수 있습니다. modal 또는 modeless 일 수 있으며 일반적으로 화면 중앙에 위치합니다.

대화 상자는 대화 상자가 modal 또는 modeless 여야 하는지 여부를 정의하는 선택적 요소인 show 메서드를 사용하여 표시되고 인수 대화 상자가 닫힐 때 호출되는 콜백 함수입니다.

사용자가 Escape 키를 누르거나 대화 상자의 포커스가 사라지면 대화 상자가 해제됩니다. 또한 사용자가 "wj-hide"으로 시작하는 클래스(e.g. "wj-hide", "wj-hide-ok", or "wj-hide-cancel") 가 있는 요소를 클릭해도 해제됩니다. 후자의 경우 클래스 이름은 대화상자의 dialogResult 속성에 할당되며 콜백 함수 또는 숨겨진 이벤트 핸들러가 대화상자의 내용을 처리하는 방법을 결정하는 데 사용할 수 있습니다.

  <button id="btnLogin" class="btn btn-primary">
    Log In
  </button>

  <!-- Log In form -->
  <form id="frmLogin">
    <h4 class="modal-header">
      Log in
      <button type="button" tabindex="-1" class="close wj-hide">&times;</button>
    </h4>
    <div class="modal-body">
      <label>
        Email:
        <input class="form-control" required type="email" />
      </label>
      <br />
      <label>
        Password:
        <input class="form-control" type="password" required pattern=".{4,}" title="Please enter 4 characters or more." />
      </label>
      <br />
      <label>
        Remember Me
        <input type="checkbox" />
      </label>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="submit">
        Log in
      </button>
    </div>
  </form>

import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';

function init() {
    // create forms
    let frmLogin = new input.Popup('#frmLogin');

    // show forms
    document.querySelector('#btnLogin').addEventListener('click', () => {
        frmLogin.show(true, (sender) => {
            switch (sender.dialogResult) {
                case 'submit':
                    alert('form submitted');
                    break;
                case 'wj-hide-create':
                    document.getElementById('btnCreateAccount').click(); // open the Create Account form
                    break;
            }
        });
    });

    // validate the form but don't submit
    document.body.addEventListener('submit', e => {
        e.preventDefault(); // don't submit
        //
        if (e.target.checkValidity()) {
            let dlg = wijmo.Control.getControl(e.target);
            dlg.hide('submit'); // close the dialog passing a dialogResult
        }
    });
}

여기를 클릭하여 세 개의 대화 상자를 정의하여 전체 사용자 권한 부여 UI를 시뮬레이션하는 데모를 참조할 수 있습니다.

또한 팝업 컨트롤을 사용하여 데모와 같이 팝업 편집기 및 팝업 대화 상자를 만들 수 있습니다.

이동 가능한 대화 상자

팝업 컨트롤의 isDraggable 속성을 사용하면 드래그 가능한 대화 상자를 만들 수 있습니다.

사용자 요소가 있는 팝업

팝업에는 위치와 가시성을 제어하는 소유자 요소가 있을 수 있습니다. 팝업 컨트롤의 showTrigger 및 hideTrigger 속성은 소유자 요소를 클릭하거나 팝업이 초점을 잃을 때 팝업을 표시할지 숨길지를 결정합니다.

부트스트랩 CSS에서 소유자 요소가 있는 팝업을 "Popovers"라고 합니다. 가장 일반적인 팝업 유형은 showTrigger가 'Click'으로 설정되고 트리거가 'Blur'로 설정된 팝업 유형입니다.

다중선택 리스트박스

대화 상자