JavaScript不使用 CSSのみでモーダル(ポップアップ)を作る

モーダルウィンドウは、JavaScriptで作るのが一般的です。

ちょっとしたモーダルウィンドウを作りたかったので、CSSのみで作ってみました。

IE11にも対応しています。

HTML

サンプルコードは下記の通り。

<input id="popup_btn" type="checkbox" />
<div class="popup">
	<label class="close_popup" for="popup_btn"></label>
	<div class="popup_wrap">
		<label class="close_btn" for="popup_btn">✖</label>

		<p>サンプル文章</p>

	</div>
</div>
<label class="open_btn" for="popup_btn">オープン</label>

CSS

 #popup_btn,.popup{
 	display: none;
 	opacity: 0
 }
 #popup_btn:checked ~ .popup {
 	display: block;
 	opacity: 1;
 	width: 100vw;
 	height: 100vh;
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 9999;
 }
 .close_popup{
 	position: fixed;
 	display: block;
 	left: 0;
 	top: 0;
 	width: 100vw;
 	height: 100vh;
 	background: rgba(0,0,0,.8);
 	z-index: 10000;
 	cursor: pointer;
 }
 .popup_wrap {
 	position: fixed;
 	left: 50%;
 	top: 50%;
 	transform: translate(-50%,-50%);
 	width: 80%;
 	height: 90%;
 	height: fit-content;
 	max-width: 540px;
 	padding: 24px 24px;
 	background: #fff;
 	border-radius: 10px;
 	z-index: 10001;
 	overflow-y: scroll;
 	overflow-x: hidden;
 	-ms-overflow-style:none;
 }
 .popup_wrap p{
 	margin-bottom: 24px;
 }
 .popup_wrap p:last-child{
 	margin-bottom: 0;
 }
 .popup_wrap::-webkit-scrollbar{
 	display:none;
 }
 .close_btn {
 	position: absolute;
 	right: 6px;
 	top: -4px;
 	cursor: pointer;
 	font-size: 20px;
 	color: #333;
 	margin: 0;
 }
 .open_btn{
 	margin: 0 auto;
 	padding: 8px 16px;
 	background: #07a;
 	display: table;
 	color: #fff;
 }
 .open_btn:hover{
 	background: #00b3ff;
 }

解説

inputタグとlabelタグを使った方法です。

inputタグにチェックが入る事で、モーダルを表示させます。

背景を隠す黒い部分はlabelタグを使い、黒い部分、もしくは✖を選択することで、モーダルを解除します。

デモ1

上記コードを使ったデモです。

デモ2

上記コードに閉じるボタンを追加した使ったデモです。

WordPressで使う場合は

ちなみにWordPressにこのサンプルコードを入れると、inputタグの前後にPタグが自動で入ってしまいます。
上記サンプルコードを使う際はinputタグの前後にdivタグで囲む必要があります。

このページのデモもdivタグを追加する事で対応しています。

それ以外の方法としては、

remove_filter( 'the_content', 'wpautop' );

上記コードをテーマのfunctions.phpに記載する必要があります。
これでpタグが自動で入る事を止められます。

ただこれでは全てのページでpタグ抜けてしまいます。

ページを限定的にする場合は下記の通りです。

add_action( 'wp_enqueue_scripts', function(){
if(is_page('inquiry')){
	remove_filter( 'the_content', 'wpautop' );
}
});

スラッグがinquiryの場合は上記の様な感じになります。
投稿のIDでもOKです。

さらにスタイルシートを限定的に読み込む場合は下記の様なコードになります。

add_action( 'wp_enqueue_scripts', function(){
if(is_page('inquiry')){
	remove_filter( 'the_content', 'wpautop' );
	wp_register_style( 'zipang_inquiry_style', false );
	wp_enqueue_style( 'zipang_inquiry_style' );
	$css = file_get_contents( get_stylesheet_directory_uri() . '/inquiry.min.css', true );
	wp_add_inline_style( 'zipang_inquiry_style', $css );
}
});

子テーマのディレクトリに
inquiry.min.css
の名前で上記スタイルシートをアップしています。

そしてインラインでスタイルシートを読み込むことで、時差無しで即時表示を実現しています。