usagi web

Web制作に関して学んだことを書いていきます。

jQueryでプラグインを使わずにモーダルウィンドウ

jQueryでプラグインを使わずにモーダルウィンドウを実装してみました。

See the Pen xQLdeV by choco (@tamagon_web) on CodePen.

2行目の$('.modal-button').click(function(){は.modal-buttonをクリックしたら実行。

3行目の$(this).next('.modal-contents').css({'display':'block'});はthis(.modal-button)の隣接している.modal-contentsをdisplay: blockにする。

4行目以降の処理は2行目からの処理と同じ感じで、.modal-closeをクリックしたら.modal-contentsをdisplay: noneにする。

実装してみて迷った箇所

クリックの処理は上手くいったのですが、開きたかったウィンドウ(.modal-contents)がすべて開いてしまったため、$(this).nextにして、クリックした箇所の隣接する.modal-contentsを開く、にしました。

モーダルウィンドウを使用したサイトを作成しました!

はなことばを集めたダミーサイトです。
サイトはこちら