Wijmo Popup ポップアップの表示方法

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container-fluid">
  <label>ポップアップを表示するタイミング
    <select id="showTrigger">
      <option value="None">なし</option>
      <option value="ClickOwner" selected>オーナー要素がクリックされたとき</option>
      <option value="DownOwner">New：オーナー要素でマウスが押されたとき</option>
      <option value="EnterOwner">New：オーナー要素の上にマウスが移動したとき</option>
    </select>
  </label><br>
  <label>ポップアップを閉じるタイミング
    <select id="hideTrigger">
      <option value="None">なし</option>
      <option value="ClickPopup">New：ポップアップがクリックされたとき</option>
      <option value="DownPopup">New：ポップアップでマウスが押されたとき</option>
      <option value="BlurOwner">New：オーナー要素のフォーカスが失われたとき</option>
      <option value="BlurPopup" selected>ポップアップのフォーカスが失われたとき</option>
      <option value="EnterPopup">New：ポップアップの上にマウスが移動したとき</option>
      <option value="LeaveOwner">New：オーナー要素の上からマウスが離れたとき</option>
      <option value="LeavePopup">New：ポップアップの上からマウスが離れたとき</option>
    </select>
  </label>
  <div>
    <div>
      <button id="owner" class="btn btn-primary">
        ポップアップを表示
      </button>
    </div>
  </div>
  <div id="popup" class="popover">
    <h3 class="popover-title">
      タイトル
    </h3>
    <div class="popover-content">
      メッセージ
    </div>
  </div>
</div>

CSS

body {
  margin: 50px 0;
}

JavaScript

document.readyState === 'complete' ? init() : window.onload = init;
function init() {
  var popup = new wijmo.input.Popup('#popup',{
    owner: document.getElementById('owner'),
    showTrigger:wijmo.input.PopupTrigger.ClickOwner,
    hideTrigger:wijmo.input.PopupTrigger.BlurPopup
  });
  document.getElementById('showTrigger').addEventListener('change', function (e) {
    popup.showTrigger = e.target.value;
  });
  document.getElementById('hideTrigger').addEventListener('change', function (e) {
    popup.hideTrigger = e.target.value;
  });
}