hiddenクラスをつけることで、マスクとモーダルを表示しないようにします。
- hiddenクラスの設定
- 隠し方
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クラスが外れるようにコードを書いて外れたら今の状態から先日スタイリングした状態に変わるというロジックになります。
・次回以降クラスを消す方法について見ていきましょう。