30DAYSトライアル2nd

デイトラ(30DAYSトライアル)中級コース(2nd)まとめ【DAY26】

デイトラ(30DAYSトライアル)中級kーす(2nd)の課題は「モーダルを作る」です。

いつも通り、DAY25までのコードに追加していきます。

モーダルとは

簡単にいうとポップアップですね。

何かをクリックすると子画面が表示されて、親画面の操作ができなくなるというものがモーダルといいます。

ちなみにポップアップが出てきても、親画面の操作ができる場合はモーダレスといいます。

僕が実装したものは以下のようなものです。

デイトラ(30DAYSトライアル)中級コースDAY25の仕様

デイトラ(30DAYSトライアル)中級コースDAY25の完成イメージが読み取れるかと思いますが、以下のような仕様で作成しています。

  • Contactセクションのプライバシーポリシーをクリックするとモーダルを開く
  • 閉じるボタン又は×ボタンを押すとモーダルを閉じる
  • モーダルが開いている間は親画面の操作はできない

デイトラ(30DAYSトライアル)中級コースDAY25の実装

モーダルのレイアウトは組んでいないので、まずはレイアウトからです。

画面レイアウト

僕は以下の構成でHTMLを組みました。

ソースコード

僕のソースコードです。

ソースコードはカスタマイズしやすい!自分で作るjQueryモーダルウィンドウを参考に作成しました。

感想・まとめ

正直参考サイトをコピっただけなので、モーダルを自分のものにできたかと言われると疑問符がついてしまいます。

でも、完成できたことに変わりはありません。

こうやってググったりして解決できればオールOKなはずですからね。

さぁデイトラ(30DAYSトライアル)中級コースは最終課題を残すのみ。

張り切っていきましょう!!

ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す