【jQuery不要】javascriptとcssで作るモーダル

2019/5/11追記
こちらの記事に改良版を公開しました。
【改良版】【jQuery不要】javascriptとcssで作るモーダル


 

どうにもwordpressの新しいエディタが使いづらい・・・これを機に静的サイトジェネレーターに手を出そうか考えているこの頃です。

javascriptとcssだけでモーダルを作りました。
javascriptが行なっているのはクリックした要素を取得してクラスをつけているくらいです。アニメーションの部分はすべてcssです。思ったよりいい感じに仕上がりになりました。
モーダルのmax-heightにはvhを効かせてあるのでモーダルの要素がはみ出しても大丈夫。


※スマホアプリ想定だったのでもしかしたらIEで動かないかもしれないです。動かない場合はletやconstをvarに変えてみるともしかしたら動くかもしれないです。

See the Pen 190325_jsモーダル by nekuta (@nekuta) on CodePen.

forの中にaddEventListenerを入れる

forで回した要素にaddEventListener仕込みたいときに普通にやるとうまく取れなくてハマりましたがこちらのサイトさんに救済されました。

【JavaScript】forループ内でクロージャを生成する – イソップブログ

data属性でモーダルを上げる

今回はモーダルのボタンにdata-modal-openを、モーダル自身にdata-modalを設定しました。ボタンをクリックした時にdata-modal-openの値を取ってきて、それと同じ値が入っているdata-modalを探しています。 

 



2019/5/11追記
こちらの記事に改良版を公開しました。
【改良版】【jQuery不要】javascriptとcssで作るモーダル

  • コーダーのための計算機