この記事では、HTML5とCSS3を使ってモーダルボックスを作成し、みんなで共有する例を紹介します。詳細は次のとおりです。
ソースコードの例もしかしたら、以下の長い手順を読みたくなくて、ソース コードまたはオンラインのサンプルを直接表示したいと考えているかもしれません。以下のリンクは、CSS3 トランジション、不透明度、ポインター イベント、その他の属性を使用して作成した機能的なモーダル ボックスです。
それをクリックして Github に移動し、ソース コードを表示できます: ModalBox-Tutorial
HTML構造フロントエンド コンポーネントはビジネス シナリオと対話シナリオによって駆動され、モーダル ボックスも例外ではありません。一般的なシナリオは、ボタンのクリックなどの操作を実行し、ユーザーにフィードバックを提供したり、ユーザーをガイドしたりするモーダル ボックスを表示することです。インターフェイスのダウン操作を実行します。モーダル ボックスの対話には 5 つのステップが含まれる場合があります。
1. ユーザーがクリックしてモーダル ボックスの表示をトリガーするボタンまたはリンクがあります。
2. モーダル ボックスが表示されると、現在のビューポート全体をブロックする透明なマスク レイヤーが表示されます。
3. モーダル ボックスのコンテンツは、ビューポートの特定の位置 (通常は中央) に不透明な色 (通常は白) で表示されます。
4. モーダル ボックスの内容 (通常は右上隅にあります) をクリックすると、モーダル ボックスが非表示になります。
5. モーダル ボックスの内容は、実際のビジネス シナリオに基づいて指定する必要があるため、任意の構造にすることができます。
スタイル
1. .modalbox は最初は非表示になっています。
1. .modalbox は透明なマスク レイヤです。
2. .modalbox-dialog は非透明なコンテンツ レイヤーです。
3. [モーダル ボックスを表示] リンクをクリックすると、.modalbox が表示されます。
4. .modalbox-close-btn をクリックすると、.modalbox が非表示になります。
エフェクト例
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。