2019/03/25

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

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

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

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

※IEでは検証してないです。

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を探しています。　

const modalOpen = document.getElementsByClassName('modal-open'); const modal = document.getElementsByClassName('modal');
//~~~~~ 中略 ~~~~~
// modalをあげる
const modalWrapOpen = function (e) {
	dataModalOpen = e.currentTarget.getAttribute('data-modal-open');
	//getAttributeでdata属性を取ってくる 
	for (var a = 0; a < modal.length; a++) {
		if (modal[a].getAttribute('data-modal') === dataModalOpen) {//dataModalOpenと一致したらclassをつける 
			modal[a].classList.add('is-open');
			modalWrapClose();
			return false;
		}
	}
};
modalOpen[n].addEventListener('click', function (e) { modalWrapOpen(e); }, false);

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