マスクとモーダルを非表示にする

2021年7月7日

hiddenクラスをつけることで、マスクとモーダルを表示しないようにします。

・では続きをしていきます。

・前回まででスタイリングはほぼほぼ終わりました。これからクリックしたら表示するようにしたいので通常状態のときは背景とモーダルウィンドウを隠して行きます。

・ではまずHTMLの方でclass属性を付けて行きます。

・#maskと#modalにclass="hidden”を追加していきましょう。これで同じ名前のクラス名をつけることができました。

・次にCSSの方で隠していくスタイリングをしていきます。要素を隠していく方法はたくさんありますが今回は#maskの方はdisplyから消し、#modalの方はアニメーションを付けたいのでtransformを使って表示させないようにしていきます。

・#maskの方ですが単純にディスプレイから単に消したいのでdisplay: none;としてあげましょう。

・こんな感じです。

#mask.hidden {

display: none;

}

・次に#modalの方ですが完成形としてはクリックすると上から降りてくるようなアニメーションを付けたいと思っているので画面の見えない上部に待機させておくようにしておきます。

・ transformプロパティを使うと上にある状態を作れます。値はtranslate(0, -500px)くらいにしておきます。

・こんな感じでいいでしょう。

#modal.hidden {

transform: translate(0, -500px);

}

・最終的にはボタンを押したらこのhiddenクラスが外れるようにコードを書いて外れたら今の状態から先日スタイリングした状態に変わるというロジックになります。

・次回以降クラスを消す方法について見ていきましょう。