Pure CSS Modal Window with :checked
CSSのみで動作するLightboxみたいなモーダルウインドウ(?)です。
CSSのみですのでjQueryやJavaScriptは利用していません。
ただ、如何せん、WEBの業務に従事しているわけでもない素人製なので…(恥)
.modalWindow が Viewport と同じ大きさになりますので、
.modalWindow の中に、お好みのものを、お好みの方法で、お好みの位置に、おいてください。
（demoでは画像を中央に表示させています）
HTML
<head>
<style>
.modalWindow { opacity: 0; visibility: hidden; } /* for Chrome bug? */
</style>
</head>
<body>
<!-- モーダルウインドウの制御スイッチ -->
<input class="modalSwitch" type="checkbox" id ="hoge">
<!-- モーダルウインドウを発動させる側 -->
<div class="modalTarget">
<!-- [ usual-content ] -->
<label class="modalSensor" for="hoge"></label> <!-- hoge = <input> id -->
</div>
<!-- モーダルウインドウ側 -->
<div class="modalWindow">
<!-- [ popup-content ] -->
<label class="modalSensor" for="hoge"></label> <!-- hoge = <input> id -->
</div>
</body>
CSS
/* ---------------------------------------------------------------------------------------------------------------------
Pure CSS Modal Window
------------------------------------------------------------------------------------------------------------------ */
.modalSwitch {
display: none;
}
.modalTarget {
display: inline-block;
position: relative;
}
.modalSensor {
cursor: pointer;
display: inline-block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.modalWindow {
z-index: 10;
display: inline-block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
-webkit-transition: opacity 1s, visibility 1s;
transition: opacity 1s, visibility 1s;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.modalSwitch:checked + .modalTarget + .modalWindow {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* --------------------------------------------------------------------------------------------------------
for Edge Bug
----------------------------------------------------------------------------------------------------- */
_:-ms-lang(x)::backdrop, .modalTarget::after,
_:-ms-lang(x)::backdrop, .modalWindow::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0);
-webkit-transition: visibility 1s;
transition: visibility 1s;
}
_:-ms-lang(x)::backdrop, .modalTarget::after { visibility: hidden; }
_:-ms-lang(x)::backdrop, .modalSwitch:checked + .modalTarget::after { visibility: visible; }
_:-ms-lang(x)::backdrop, .modalTarget + .modalWindow::after { visibility: visible; }
_:-ms-lang(x)::backdrop, .modalSwitch:checked + .modalTarget + .modalWindow::after { visibility: hidden; }
/* ----------------------------------------------------------------------------------------------------- */
補足1
background-color:rgba(0,0,0,0);
background-colorが設定されていないと、
画像等の重なり順序（描画順序）が何故かおかしくなる、
というIE9やIE10の不具合(?)に出くわしたため、
それを回避するために設定していた名残りです。
補足2
_:-ms-lang(x)::backdrop, hoge::after
fadein時にclickして即fadeout、などとすると、
他のブラウザ（IE11でさえ）問題ないのに、Edgeは妙な挙動をします。
仕方がないので、操作性が若干悪くなりますが、
Edgeのみfade時は不具合を起こすclickを出来ないようにしています。