CSSを使用してモーダルウィンドウを作成する方法

UI デザイナーの素敵な側面は、ページのスタイルを CSS ファイルで設定できるWEB技術の優位性を享受できる点です。

このチュートリアルでは、あなただけの CSS を使用してモーダルウィンドウを構築する方法について説明します。
一部のコンテンツを作成することを始めましょう。
あなたはモーダルになるコンテナと、その上にそのモーダルが表示されるいくつかの他のコンテンツが必要になります。

初期コンテンツ

 

他のすべての要素のトップにコンテナを表示する

次の内容の CSS ファイルを作成します。

.Modal-content {
    position: absolute;
    width: 80%;
    left: 0;
    right: 0;
    margin: 5% auto;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    padding: 2em;
}

UI デザイナーでそのファイルを使用するには、ページのアセットとしてそのファイルをアップロードする必要があります。
そのためには、あなたのページを開き、「Assets」に移動し、画面下部の「新規アセットを追加」をクリックします。
タイプを「CSS」、ソースを「Local」に選択し、あなたの CSS ファイルをアップロードします。
これで、ページに追加され、すべてのクラスが任意の要素の「CSS クラス」プロパティからアクセスが可能になります。

さて、コンテナの「CSS クラス」プロパティに「Modal-content」を追加しましょう。
プレビューボタンをクリックして結果を確認します。

モーダルコンテンツコンテナ

下部の要素がアクセスできないようにオーバーレイを追加する

新しいコンテナをオーバーレイのコンテナとしてトップに追加し、「Modal-content」のコンテナを追加したオーバーレイのコンテナに移動します。
CSS ファイルに次のコードを追加します。

.Modal-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .4);
    z-index: 1;
}

そして、オーバーレイのコンテナに「Modal-overlay」クラスを追加する必要があります。

モーダルオーバーレイコンテナ

モーダルをコントロールする

UI デザイナーでモーダルを表示する方法とタイミングに関しては、多くのアプローチがありますが、ここでは、複数のモーダルにうまく対応できる方法を紹介します。

モーダルウィンドウを開く

モーダルのコンテナを作成したので、次にそれを表示する際の制御を埋め込む必要があります。
「modals」という配列の JSON 変数を作成することによって開始します。
まず、「Variables」に移動し画面下部の「新規変数を作成」をクリックします。
名前を「modals」、タイプを「JSON」、値を「[]」にします。これは空の配列になります。

変数モーダル

次に「Modal-overlay」のコンテナの「コレクション」プロパティに「modals」変数をバインドします。

この配列が空であるときはいつでも、モーダルを隠す効果を持っています。
また、「modals」の配列にオブジェクトを追加した場合は、新しいモーダルを表示します。

このチュートリアルでは、ボタンを使用してそれを行います。
「Open」ボタンを追加し、そのボタンの「アクション」プロパティを「コレクションに追加」に設定し、次に「コレクション」プロパティに「modals」変数をバインドしましょう。

オープンモーダルボタン

プレビューを使用して「Open」ボタンのアクション結果を確認することができます。

[OK] ならモーダルウィンドウを閉じる

モーダルに対しダイレクトに応答することは、それを閉じることです。
以前の方法では、ボタンウィジェットで別のアクションを使用することができましたが、ここでは新しい方法を紹介します。
まず、モーダルに「Close」ボタンを追加し、そのボタンの「アクション」プロパティを「コレクションから削除」に設定します。
その後、「modals」変数を「コレクション」プロパティにバインドします。
オブジェクトが削除されることを定義する必要があるので、「削除」プロパティで「項目」を選択し、「削除する項目」プロパティに「$item」変数を追加することでこれを行うことができます。
ここの「$item」がコンテナの繰り返されるコンテキストにあるので、利用可能です。

閉じるモーダルボタン

完成したあなたのデザインページは次のようになります。

このチュートリアルの実行結果は次のとおりです

モーダル結果