JavaScriptでモーダルウィンドウを作ろう (全8回)

#01 モーダルウィンドウを作ってみよう (02:12) 無料公開中
- 完成版の確認
- index.htmlの作成
#02 画面を作っていこう (02:19) 無料公開中
- styles.cssの作成
- #openのマークアップ
- #maskのマークアップ
- #modalのマークアップ
#03 ボタンのスタイルを整えよう (02:47)
- bodyのスタイリング
- #openのスタイリング
- #maskのスタイリング
#04 マスクとモーダルのスタイルを整えよう (02:45)
- #openのスタイリング
- #maskのスタイリング
- positionプロパティ
#05 マスクとモーダルを非表示にしよう (02:09)
- hiddenクラスの設定
- transformプロパティ
#06 要素を取得しよう (02:01)
- main.jsの作成
- 要素の取得
#07 マスクとモーダルを表示しよう (02:37)
- clickイベントの設定
- hiddenクラスの付け外し
#08 モーダルにアニメーションをつけよう (02:43)
- transitionプロパティ
- z-index