固定位置でポップアップを確立する

ここでは、ユーザーによって開始される、少しユニークなポップアップの作成方法を説明します。ユーザーはボタンをクリックしてポップアップ アニメーションをトリガーし、フォームを表示します (必要に応じてトリガーをいつでも変更できます)。

このチュートリアルで学ぶ内容:

1. 固定モーダルを構築する
2. プロジェクトにボタンを統合する
3. ポップアップトリガーを設定する
4. ポップアップアニメーションを整理する
5. 閉じるアニメーションを設定する

固定モーダルを構築する

コンテンツのオーバーレイを作成するには、次の 3 つの手順に従います。

1. ポップアップラッパーを開発する
2. フォーム要素を含める
3. 「閉じる」リンクを作成する

ポップアップラッパーを開発する

挿入するには divブロック モーダルのラッパーとして、キーボードショートカットを使用します あ アクセスするには パネルを追加 （または左上隅のプラスアイコンをクリックして）ドラッグして divブロック 要素をプロジェクトに追加します。

プロジェクトをより良く整理するために、 divブロック 本文要素の上部にドラッグします（必須ではありませんが、この方法は要素を整理するのに役立ちます）。要素を ナビゲーター そしてそれを ボディ要素.

を選択 divブロックポップアップラッパーのようなクラス名を割り当て、スタイル属性を定義します。 スタイルパネル:

• ディスプレイ: フレックス
• フレックスレイアウト: 垂直、中央、中央 (フォームを垂直に中央に配置する)

スクロールして スタイルパネル ラッパーがビュー全体を占めるように追加のスタイル設定を構成します。

• ポジション: 固定、フル
• Z インデックス: 9999 (ラッパーをプロジェクト内の他のすべての要素の上に配置します)

背景色を適用して、ポップアップをプロジェクトの残りのコンテンツから目立たせます。#000000 と 80% の不透明度、またはプロジェクトに適したその他の背景色を試してください。

フォーム要素を含める

フォーム付きのポップアップを表示するには、 形状 ラッパー内の要素。

ラッパーを選択し、 形状 クイック検索機能を使用する:

1. プレス コマンド+E (Macの場合) または コントロール + E (PCの場合)
2. 「フォーム」を検索
3. 選択してください 形状 要素を「ポップアップラッパー」内に配置します（ラッパーの以前のスタイルにより、 形状 中央揃えにはFlexboxを使用します）
4. プロジェクトに合わせてフォームを設計します（例：最大幅を500ピクセルに制限し、幅を100%に設定します）

これらのスタイルを組み合わせることで、フォームは 500 ピクセル (最大幅) 内に収まりながら、さまざまなデバイス サイズ (100% 幅) にわたってレスポンシブになります。レスポンシブ デザインの詳細については、Webflow をご覧ください。

「閉じる」リンクを作成する

次に、ユーザーがフォームを送信した後にポップアップを閉じるためのテキスト リンクを挿入しましょう。

これを実現するには、 テキストリンク の中に ナビゲーター 「ポップアップ ラッパー」の上部に追加します (繰り返しますが、必須ではありませんが、この方法は要素を整理するのに役立ちます)。

リンクを選択した状態で、リンクにクラス名 (例: Pop-up close) を割り当て、スタイルを適用します。

• 位置: 絶対
• トップ: 5%
• 右: 5%
• 下: 自動
• 左: 自動

このスタイル セットを利用すると、閉じるリンクをポップアップ ラッパーの上部に配置することができます。

この時点で、ポップアップのすべての要素が作成されました。「ポップアップラッパー」の表示スタイルを次のように変更します。 なし 使用していないときに隠すためです。

「ポップアップ ラッパー」0% の不透明度を設定し、インタラクション時にスムーズなフェードイン アニメーションを作成する準備をします。

プロジェクトにボタンを挿入する

プロジェクト設定の最後の手順では、クリックするとポップアップをトリガーするボタンなどの要素を追加します。 

ボタンを組み込むには:

1. プレス あ キーボードの パネルを追加 （またはデザイナーの左上にある + アイコンをクリックします）
2. ドラッグ ボタン 要素をプロジェクト内の目的の場所にドラッグします

ポップアップトリガーを設定する

プロジェクトにボタンを追加したら、ボタンがクリックされたときにポップアップをトリガーするインタラクションを確立できるようになります。

これまで、インタラクションには複雑な JavaScript ライブラリが必要で、さまざまなツール、プラグイン、コーディングのかなりの学習曲線が必要でした。Webflow を使用すると、ポップアップ インタラクションを視覚的に作成できます。

まず、キャンバス上のボタンを選択します。次に、インタラクションシンボルをクリックしてインタラクションパネルを表示します。

以内 交流 パネルで+アイコンをクリックして 要素トリガー、次に マウスクリック 代替。

ポップアップアニメーションを設定する

Webflowにはいくつかのプリセットインタラクションが用意されていますが、ポップアップを表示するためのカスタマイズされたインタラクションを作成します。ボタンをクリックすると、ポップアップが徐々にフェードインします。これを実現するには、 1回目のクリックで – 選択してください アクション ドロップダウンから選択して アニメーションを開始する オプション。その後、+アイコンを押して、タイミングアニメーションを組み込みます

アニメーションに名前 (例: ポップアップ) を割り当て、アニメーション化する要素を選択できるようになりました。 

注記: インタラクション パネルがアクティブなときに要素を選択してください。

このプロジェクトでは、「ポップアップラッパー」要素を ナビゲーター. 次に、横にある+アイコンをクリックします 行動を選択し、 不透明度 (これにより、最初に不透明度の状態が設定されます)。

まず、タイミングについて考えてみましょう（パネルの下部にあるタイミング表示に注目してください）。 初期状態として設定 切り替えて値を割り当てる 0%.

次に、近くの+記号を選択します 行動を選択し、 非表示/表示 （非表示のポップアップを表示するには、不透明度は非表示のままです）。 画面 として フレックス.

最後のタスクを完了するには、不透明度を0%から100%に変更します。これを実行するには、 行動、次に選択する 不透明度 (100% に自動調整されます)。

最後に、 終わり ボタンをクリックし、プロジェクトの公開に進みます。ボタンをクリックすると、ポップアップが表示されます。ただし、まだ閉じることはできません。そのため、「ポップアップを閉じる」リンクでインタラクションを確立します。

終了アニメーションを準備する

終了インタラクションを構築するには、まず、 ナビゲーター.

次に、リンクをクリックするとポップアップを閉じるためのインタラクションを導入します。 

次の手順を実行します：

1. クリック 交流 アイコンをクリックして 交流 パネル
2. 選択してください マウスクリック オプション
3. から アクション ドロップダウンから選択 アニメーションを開始する
4. 次に、+記号をクリックして、タイミングアニメーションを追加します。
5. アニメーションにラベルを付ける（ポップアップを閉じるなど）
6. の中に 交流 パネルで、「ポップアップラッパー」要素をハイライト表示します。 ナビゲーター
7. 以下を含める 不透明度 オプションの横にある+アイコンを選択して 行動
8. 不透明度を0%に調整します
9. の横にある+アイコンを選択して別のアクションを追加します 行動をクリックし、 非表示/表示
10. 選ぶ なし 以内 画面 設定

最後に、 終わり ボタンをクリックし、プロジェクトを再公開してポップアップをテストします。

固定位置のポップアップを開発して素晴らしい仕事をしました。よくできました!