私が住んでいる地域は、昨日はすごい雷雨でした。
天気が悪い日はパソコン作業がはかどらないんですが、昨日はcssでモーダルウィンドウを作れることがわかってちょっとテンションが上がったので備忘録もかねてかいておきます。
本当、最近はJSを使用しなくてもcssで何でもできるようになりましたね。
css3さまさまです。
サイトの制作で、いまだにモーダルウィンドウを使用することが多くあり、(個人的にはあまりお勧めしてない)毎回jQueryを使用して作成するのですがどうもサイトが重くなる…気がする…。
スタイルシートでどうにかできないものかと思っていたら、cssでできることが判明!
今回はcssのみだけでモーダルウィンドウを実装してみました。
See the Pen modalwindow css by sayuri (@giraffeweb) on CodePen.0
「CSS Modal」という方法です。
水色の「click!!」と書いてあるボタンをクリックすると、モーダルウィンドウがでてきます。動きもそこそこなめらか。
簡単な記述であっという間に、軽量のモーダルウィンドウが実装できました。
このまま左右にスライドしたら最高なんですけどね!
おいおい改造してつくっていけたらと思います。
みなさんもぜひシンプルなモーダルウィンドウを実装するときは使用してみてくださいね!