HTML&CSS WEBデザイン

【Javascript】ボタンをクリックしてモーダルウィンドウ(画像)を表示させる方法(レスポンシブ対応)

自分でWebサイトを作ったり、ブログを運営していると「モーダルウィンドウ」機能が必要になる場合があります。
今回はJavaScriptでモーダルウィンドウを簡単に作成していきます!テキストになっているモーダルはよく見かけますが、画像になっているものがなかなかない為、作りました。
レスポンシブにも対応しているので、このままサイトで使えます。

See the Pen Untitled by Satomi (@satomi79000033) on CodePen.

モーダルウィンドウ内の「×」ボタン、もしくはモーダルウィンドウの外のオーバーレイをクリックするとモーダルウィンドウが閉じます。
スクロールしてもモ-ダルウィンドウの位置が画面の中央に固定され表示されるようになっています。

-HTML&CSS, WEBデザイン