HTMLでマークアップをして、画面の大まかな見た目を作っていきます。
- 3つの画面
- ボタン
- 背景
- モーダルウィンドウ
3つの画面
・それでは早速モーダルウィンドウを作って行きます。
・モーダルウィンドウは大きく分けて3つの部品でできています。モーダルを開くためのボタンと開いたあとのグレーの背景、その上にモーダルウィンドウがあります。
・これらをHTMLでマークアップしていくところから始めていきます。
・それぞれJavaScriptで扱っていくのでid属性を付けて行きます。
ボタン
・今回は初心者向けということで基本divタグを使って作っていきます。スタイルがしやすいというメリットがあります。
・まずはモーダルウィンドウを開くためのボタンを作っていきます。
・divタグにid属性を付けて行きます。idは開くためのボタンなのでopenとしておきます。そしてテキストは詳細を見るとしてあげればいいでしょう。
背景
・次にモーダルウィンドウを開いたあとのグレーの背景を作っていきます。
・これは単純にdivタグのid名を決めるだけでいいので今回はmaskとしておきます。中身のテキストはいらないです。
モーダルウィンドウ
・最後にモーダルウィンドウです。これはセクションタグで作っていきます。idをつけていきましょう。今回はmodalとしていけばいいでしょう。
・中身は説明文と閉じるためのボタンが必要なので文章はpタグ、閉じるボタンはdivタグで作っていきます。
・文章の中身は注意喚起や説明などを入れるとモーダルウィンドウになります。今回はダミーテキストとして適当な文章を入れておきます。
・閉じるボタンはdivタグで作っていきそこにもidをつけておきます。closeとしておきます。
・テキストは閉じるでいいでしょう。