中身を切り替えできるお手軽モーダルウィンドウの作り方（HTML/SCSS）

はじめに

中身を切り替えできるお手軽モーダルウィンドウの作り方。

使用言語

• HTML
• SCSS（CSSでも可）

コード

See the Pen JjjYvOG by k1-web (@k1-web) on CodePen.

やってること

ラジオボタンを判定にしてチェックされているかどうかで表示非表示を切り替えている。
「#close（閉じる）」か「#overlay（背景）」を押すなどのチェックしている状態だと、モーダルウィンドウを非表示にする。
「#handle-1」にチェックが付いていたら閉じる・背景・コンテンツを表示させる。
表示させるコンテンツは「#handle-1」に隣接する次の要素を表示させる。

xxx.html

	<input type="radio" name="modal" id="close">
	<input type="radio" name="modal" id="overlay" checked>

	<input type="radio" name="modal" id="handle-1">
		<div id="modal-1" class="wrap wrap-1"></div>

xxx.css

	#handle-1 + #modal-1 {
		display: none;
	}
	#handle-1:checked + #modal-1 {
		display: block;
	}

背景がスクロールするのがイヤな人向け追加jQuery

PCとSPとで少し記述は違いますが、以下のjQueryを追加することで、背景スクロールも制御できます。

PC用

pc.js

	$('input[name="modal"], label.handle').on('change blur click focus', function(){
		if ( $('input#close').prop('checked') || $('input#overlay').prop('checked') ){
			$('html, body').removeAttr('style');
		} else {
			$('html, body').css({'overflow':'hidden'});
		}
	});

SP用

sp.js

	$('input[name="modal"], label.handle').on('change blur click focus', function(){
		if ( $('input#close').prop('checked') || $('input#overlay').prop('checked') ){
			$('html, body').removeAttr('style');
			$('body').off('.noScroll');
		} else {
			$('html, body').css({'overflow':'hidden'});
			$('body').on('touchmove.noScroll', function(e) {
				e.preventDefault();
			});
		}
	});