モーダルウィンドウを学ぼう

モーダルウィンドウとは、元のページの上に重なって表示されるような要素のことです。ポップアップと呼ばれることもありますね。

こういう動き。

使用される頻度は多く、実装難易度もそこまで高くないのでぜひ覚えたいパーツです。

これを作るためのライブラリもありますが、それほど楽にならないわりに細かい調整がしにくくなるのであまり気にしなくても良いでしょう。

そんなモーダルウィンドウを学べる記事をまとめました。

セカヤサブログ

URL:https://itokoba.com/archives/1797

基本の作り方です。背景の固定は応用的なので、難しければ最初はなくてもいいでしょう。

「htmlはデータの構造」「cssはその見せ方を作るもの」「jsはクラスの付け替えによってその2つを操作するもの」と言う切り分け方は重要です。

難易度:★★☆

動くWebデザインアイデア帳

URL:https://coco-factory.jp/ugokuweb/move01-cat/modal/

こちらは実装方法というより、いろいろなパターンのモーダルウィンドウを知ってバリエーションを持つために読んでおきましょう。

実装は前者の記事の応用でできるはずです。

難易度:★★☆

Leave a Reply

Your email address will not be published.