はじめに
このプロジェクトでは、Web ページ上で表示および非表示にできるモーダルボックスコンポーネントを作成する方法を学びます。モーダルボックスは、Web アプリケーションで現在のページから移動することなく追加のコンテンツやフォームを表示するために一般的に使用されます。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下を学びます。
- モーダルボックスの HTML 構造を設定する方法
- モーダルボックスを表示および非表示にする機能を実装する方法
- 非表示にした後にモーダルボックスが再度表示されないようにイベントバブリングを処理する方法
🏆 成果
このプロジェクトを完了すると、以下ができるようになります。
- HTML、CSS、JavaScript を使用してモーダルボックスを作成する
- JavaScript 関数を使用してモーダルボックスの表示状態を制御する
- イベントバブリングを防止して、モーダルボックスが期待通りの動作をするようにする
プロジェクト構造を設定する
このステップでは、プロジェクトファイルと構造を設定します。以下の手順に従ってこのステップを完了します。
プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。
├── bootstrap.min.css
├── bootstrap.min.js
├── index.html
├── jquery.min.js
└── style.css
WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。
表示と非表示の機能を実装する
このステップでは、モーダルボックスを表示および非表示にする機能を実装する方法を学びます。
index.htmlファイルの下部にある<script>セクションを見つけます。<script>セクションの中に、以下のコードがあります。
// TODO
let signModalDoc = document.querySelector("#myModal");
function handleClick(e) {
signModalDoc.style.display = "block";
event.stopPropagation();
}
function handleOk(e) {
signModalDoc.style.display = "none";
event.stopPropagation();
}
各関数の目的を理解します。
handleClick(e): この関数は、「今すぐ登録」ボタンがクリックされたときに呼び出されます。モーダルボックスのdisplayプロパティを'block'に設定して、モーダルボックスを表示可能にします。handleOk(e): この関数は、モーダルボックス内の閉じる「X」ボタンまたは「OK」ボタンがクリックされたときに呼び出されます。モーダルボックスのdisplayプロパティを'none'に設定して、モーダルボックスを非表示にします。
両方の関数にある
event.stopPropagation()の行は、クリックイベントが親要素にバブリングアップして、非表示にした後にモーダルボックスが再度表示される原因になるのを防ぐために使用されます。
機能をテストする
index.htmlファイルを保存します。- ブラウザで Web ページを更新します。
- 「今すぐ登録」ボタンをクリックして、モーダルボックスが表示されることを確認します。
- モーダルボックス内の閉じる「X」ボタンまたは「OK」ボタンをクリックして、モーダルボックスが非表示になることを確認します。最終的な結果は以下の通りです。
おめでとうございます！あなたはモーダルボックスの表示と非表示の機能を正常に実装しました。
まとめ
おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために、LabEx でさらに多くの実験を行うことができます。
