ポップアップ

WijmoではPopupコントロールが導入されており、これを使用して、任意のコンテンツをダイアログ（画面の中央に配置される。オーナー要素なし）またはポップアップ（オーナー要素を基準として配置される）として表示できます。

ダイアログ（オーナーなしのポップアップ）

ダイアログは、オーナー要素を持たないPopupです。表示するには、showメソッドを呼び出す必要があります。

ダイアログは、モーダルまたはモードレスにできます。モーダルダイアログは、表示されるとダイアログの背景が暗くなります。また、hideTriggerプロパティがNoneに設定されている場合は、ダイアログがフォーカスを失うことはできず、終了するには、ユーザーが［Esc］キーを押すか、ダイアログ上の要素をクリックする必要があります。

Popupコントロールが提供する次の機能に注目してください。

要素の配置：ポップアップは画面の中央に配置されるか、オーナー要素のエッジを検出して、その上または下に配置されます。
フォーカスの処理：「autofocus」属性のサポートにより、ダイアログが表示されると、入力要素がフォーカスを取得します。ユーザーが［Tab］キーを押すと、モーダルポップアップはフォーカスをコントロール内で移動します。
キーボードの処理：ユーザーが［Esc］キーを押すと、ポップアップは非表示になります。また、ポップアップに無効な状態の要素がない状態で［Enter］キーを押したときも、非表示になります。

カスタムCSSアニメーション

Popupクラスには、fadeInおよびfadeOutという名前の2つのプロパティがあり、Popupを表示/非表示にする際に単純なアニメーションを追加できます。どちらも、デフォルトではtrueに設定されます。

カスタムCSSベースの独自のアニメーションを作成することもできます。それには、showingおよびhidingイベントに応答してPopupのホスト要素にクラスを追加および削除し、これらのクラスに基づいてアニメーションを適用するためのCSSルールを定義します。

たとえば、以下のルールは、custom-animationクラスを持つ要素に対しては非表示状態を指定し、custom-animation-visibleクラスを持つ要素に対しては表示状態を指定します。

/* CSS animations for fading in and out */
.custom-animation {
    opacity: 0;
    transform: rotate3d(1, .5, .5, 180deg) scale(0.5);
    transition: all ease-out 0.4s;
}
.custom-animation-visible {
    opacity: 1;
    transform: none;
    transition: all ease-in 0.3s;
}

次の点に注意してください。

カスタムスタイルはPopup要素にのみ適用され、モーダルの背景には適用されません。
Popupを非表示にする際、PopupがDOMから削除されるまでの時間は400msです。したがって、CSS表示トランジションをこれと同じ時間にする必要があります。

次のボタンをクリックすると、Popupにこれらのクラスを適用した効果を確認できます。

ポップアップとPromise

簡単にPopupをJavaScript Promiseにラップし、ダイアログを表示してから、dialogResultに基づいてこのPromiseを解決または拒否できます。

たとえば、ここにJavaScript Promiseを作成する関数があります。このPromiseを使用するには、その「then」メソッドを呼び出し、「resolve」の結果と「reject」の結果に対応するコールバックを渡します。この場合は、ダイアログの内容が送信されると「resolve」が呼び出され、［Esc］キーまたはダイアログのヘッダーにある閉じるボタンが押されてダイアログが閉じると「reject」が呼び出されます。

// create Popup Promise
function getPopupPromise() {
    var p = new Promise(function (resolve, reject) {
        var popup = $scope.dialogs.login;
        popup.show(true);
        popup.hidden.addHandler(function () {
            popup.hidden.removeAllHandlers();
            if (popup.dialogResult == 'submit') {
                resolve(popup);
            } else {
                reject(popup);
            }
        });
    });
    return p;
}

このボタンをクリックすると動作を確認できます。

申し訳ありませんが、使用されているブラウザがPromiseをサポートしていないため、表示できません（Chrome、Edge、およびFireFoxはサポートしていますが、IEは未サポートです...）

ポップオーバー（オーナー要素を持つポップアップ）

Popupは、オーナー要素を使用してポップアップの表示/非表示を制御することができます。 showTriggerプロパティとhideTriggerプロパティは、オーナー要素がクリックされたり、ポップアップがフォーカスを失ったときに、Popupを表示/非表示にするように指定します。