クイック スタート: ポップアップの追加 (HTML)

  • [アーティクル]

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

このクイック スタートでは、ポップアップを作ってスタイルを設定する方法について説明します。(Windows のみ)

必要条件

JavaScript を使った初めての Windows ストア アプリの構築

ポップアップのガイドラインとチェック リスト

1. ポップアップを作る

この例では、ユーザーが [Buy] ボタンをクリックすると、ポップアップがボタンの上部に表示されます。ポップアップは、JavaScript 用 Windows ライブラリのコントロール WinJS.UI.Flyout で、<body> 要素の直接の子にする必要があります。

<body>
    <!-- Button that launches the confirmation Flyout. -->
    <button class="action" id="buyButton">Buy</button>

    <!-- Confirmation Flyout. -->
    <div id="confirmFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Confirm purchase flyout}">
        <div>Your account will be charged $252.</div>
        <button id="confirmButton">Complete Order</button>
    </div>
<body>

// Initialize WinJS controls.
WinJS.UI.processAll();

// Initialize event listeners.
document.getElementById("buyButton").addEventListener("click", showConfirmFlyout, false);
document.getElementById("confirmButton").addEventListener("click", confirmOrder, false);

// Command and Flyout functions.
function showConfirmFlyout() {
    showFlyout(confirmFlyout, buyButton, "top");
}
function showFlyout(flyout, anchor, placement) {
    flyout.winControl.show(anchor, placement);
}
function confirmOrder() {
    document.getElementById("confirmFlyout").winControl.hide();
}

2. ポップアップのスタイルを設定する

以下のように淡色や濃色の UI テーマの標準スタイルを保持することも、次に説明するようにスタイル設定をカスタマイズすることもできます。

淡色スタイルのポップアップ

濃色スタイルのポップアップ

 

カスタマイズできる、ポップアップの CSS プロパティは多数あります。

プロパティ 例

Font-family

テキストのフォントを制御する

 font-family:'Segoe UI';

Font-size

テキストのサイズを制御する

 font-size:9pt;

Color

テキストの色を制御する

 color:rgb(0, 0, 0);

Background-color

フェイスの背景色を制御する

 background-color:rgb(255, 255, 255);

Border

境界線の太さ、色、線のスタイルを制御する

 border:2px solid rgb(128, 128, 128);

Max-width

ボックスの最大幅を制御する

 max-width:400px;

 

次の例は、HTML ポップアップ コントロールのサンプルから抜粋したものであり、主に既定のスタイルを利用しています。

    /* Flyout title. */
    .win-flyout:not(.win-menu) .win-type-x-large
    {
        font-weight: 300;
        margin-top: -13px;
        padding-bottom: 18px;
    }

    /* Flyout buttons. */
    .win-flyout:not(.win-menu) button,
    .win-flyout:not(.win-menu) input[type="button"]
    {
        margin-top: 16px;
        margin-left: 20px;
        float: right;
    }

次の例は、よりはっきりした視覚要素を使って少しカスタマイズしていますが、かなりわかりにくくなっています。

    /* Flyout with attent-getting colors. */
    .win-flyout
    {
        background-color: yellow;
        border-color: red;
        color: green;
    }

スタイルが指定されたポップアップ

要約

このクイック スタートでは、ユーザーの操作に応答するポップアップを作ってスタイルを設定しました。

関連トピック

WinJS.UI.Flyout

HTML ポップアップ コントロールに関するページ