소유자 요소와 Popup

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

Bootstrap CSS에서, 소유자 요소가 포함된 팝업을 "Popovers"라고 합니다. 가장 일반적인 유형의 Popover는 __showTrigger__가 'Click'으로 설정되고 __hideTrigger__가 'Blur'로 설정된 것입니다.

예시: 소유자 요소는 버튼입니다. 버튼을 클릭하면 Popover가 표시됩니다. 팝오버 바깥 쪽의 아무 곳이나 클릭하면 포커스가 사라지고 팝업이 숨겨집니다:

HTML

  <button id="btnClickBlur" class="btn btn-primary">
    Show the Popover
  </button>
  <div id="popClickBlur" class="popover">
    <h3 class="popover-title">
      Title
    </h3>
    <div class="popover-content">
      Hello Popup<br/>
      This is a multi-line message!
      This is a long line in my popover, which uses Bootstrap's
      'popover-content' style.
    </div>
  </div>

Javascript

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

function init() {
    let popClickBlur = new input.Popup('#popClickBlur', {
        owner: document.getElementById('btnClickBlur'),
        showTrigger: 'Click',
        hideTrigger: 'Blur'
    });
}