Zenn
🐒

モーダルウィンドウ

2022/09/29に公開
CSS
HTML
JavaScript
初心者
tech

前提

目的

モーダルウィンドウを1人で作成できるようになる

課題

0→1で創れない

行動

1.実際に1人で創る
2.不明点の洗い出し
3.不明点の学習/理解
4.繰り返し創る過程で創作過程を血肉化する

躓いた箇所

CSS

1. borderの一括指定プロパティの順序が分からない

→ border:　<border-width> || <border-style> || <border-color>

　e.g. border: 1px solid #ccc
　　　/* 1pxの幅, 実線, 灰色 */　

2. borderが効かない

→一括指定の際、プロパティ間に , は不要

　e.g. border: 1px solid #ccc

3. 色の透明度を調整したい

→rgbaプロパティを使用する

　e.g. background-color:rgba(0,0,0, .4) /* 透明度の高い黒になる */

4. positionプロパティを使用した要素の中央揃えが分からない

→position:absolute;の特殊な記載方法を使用する (質問中)

　position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;

5. #maskより#modalが上にくるようにしたい

→z-indexを指定しない重ね合わせでは、positionによって表示順が決まっている。
　e.g. position:fixed は position:static より優先度が高い

6. モーダルが上から降りてくるような実装をしたい

1.CSSで#modalにhiddenクラスを付与し、アニメーションを設定。
　 デフォルトでモーダルが画面上部に潜んでいる状態にする。

2.#modalにtransitionプロパティを設定し、
　　jsでclassListの着脱が行われる度に適用されるようにする

※ #modal.hiddenにtransitionを指定すると、
　 close押下時(上部に上がる動き)のみスタイル適用になる

Discussion