HTML5 と CSS3 を使用してモーダル ボックスの例を作成する

この記事では、HTML5 と CSS3 を使用してモーダル ボックスを作成する例について、主に関連情報を紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

ソース コードのサンプル

おそらく、以下の長い手順を読みたくないので、ソース コードまたはオンラインのサンプルを直接表示したいと思われるかもしれません。以下のリンクは、CSS3 トランジション、不透明度、ポインター イベント、その他の属性を使用して作成した機能的なモーダル ボックスです。

クリックすると Github に移動してソース コードを表示できます: ModalBox-Tutorial

HTML 構造

フロントエンド コンポーネントはビジネス シナリオとインタラクション シナリオによって駆動され、モーダル ボックスも例外ではありません。ボタンをクリックするなどの特定の操作を実行し、モーダル ボックスを表示してユーザーにフィードバックを提供したり、ユーザーが次の操作を実行するようにガイドしたりすることです。モーダル ボックスのインタラクションには 5 つのステップが含まれます:

1. ボタンまたはリンクがあり、ユーザーがそれをクリックしてモーダル ボックスの表示をトリガーします。

2.現在のビューポート全体を覆う透明なマスク オーバーレイ。

3. モーダル ボックスのコンテンツは、ビューポートの特定の位置 (通常は中央) に表示されます。モーダル ボックスの内容 (通常は右上隅) をクリックすると、モーダル ボックスが非表示になります。

5. モーダル ボックスの内容は、実際のビジネスに基づいて指定する必要があります。シナリオなので、どのような構造でも構いません。

1. .modalbox は、最初は非透明のマスクレイヤーです。

3 。モーダルボックスを表示するリンク、.modalbox が表示されます。

4. .modalbox-close-btn をクリックすると、.modalbox が非表示になります

関連する推奨事項:

[保存] をクリックすると、ブートストラップ モーダル ボックスが自動的に閉じます。 コード共有

ブートストラップ モーダル ボックスのネスト、tabindex 属性、影の削除方法

Angular でモーダル ボックスをポップアップする 2 つの方法

以上がHTML5 と CSS3 を使用してモーダル ボックスの例を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。