🐒

モーダルウィンドウ

2022/09/28に公開約1,100字

前提

目的

モーダルウィンドウを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

ログインするとコメントできます