JavaScriptでモーダルウィンドウを作ろう
(全8回)
JavaScriptでモーダルウィンドウを作る方法を学んでいきます。
このレッスンでは JavaScript (ES2017) を使用しています。
-
#01 モーダルウィンドウを作ってみよう (02:31) 無料公開中
- 完成版の確認
- index.htmlの作成
- styles.cssの作成
- main.jsの作成
-
#02 画面を作っていこう (02:46) 無料公開中
- #openのマークアップ
- #maskのマークアップ
- #modalのマークアップ
-
#03 ボタンのスタイルを整えよう (01:49)
- bodyのスタイリング
- #openのスタイリング
- #maskのスタイリング
-
#04 マスクとモーダルのスタイルを整えよう (02:56)
- #openのスタイリング
- #maskのスタイリング
- positionプロパティ
-
#05 マスクとモーダルを非表示にしよう (02:01)
- hiddenクラスの設定
- transformプロパティ
-
#06 要素を取得しよう (01:53)
- 要素の取得
-
#07 マスクとモーダルを表示しよう (02:19)
- clickイベントの設定
- hiddenクラスの付け外し
-
#08 モーダルにアニメーションをつけよう (02:21)
- transitionプロパティ
- z-index
