モーダルウィンドウは、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
の名前で上記スタイルシートをアップしています。
そしてインラインでスタイルシートを読み込むことで、時差無しで即時表示を実現しています。