勉強備忘録：ドットインストールJavaScriptでモーダルウィンドウをつくろう

１．css

・position:fixed→特定の位置に表示させる。
　position：absolute→親要素を基準とした絶対位置
　top,bottom,left,rightで基準の上下左右からの位置を指定。
・transform→与えられた要素を回転、拡大縮小、傾斜、移動できる。
　transform:translate(x軸の移動距離、y軸の移動距離)
　指定した方向に移動する。
・transition:対象のtransitionプロパティ　変化にかかる時間

２．ロジック

・ボタン、マスク、モーダルの三つの要素を作成
　初期状態は、マスクとモーダルは非表示
　hiddenクラスをつけておき、maskのhiddenクラスは、
　cssでdisplay:noneとしておく。
　modalのhiddenクラスは、上の見えていないところに配置。
・htmlで、modal→open→maskの順に書くと、maskがmodalより上に
　表示される。z.indexで優先順位をつけて、制御する。
・cssのtarget疑似クラスを使えば、javascriptがなくても、
　モーダルを実装することは、可能。（単純な拡大など？）

３．感想

UIっぽい！