Pure CSS Modal Window with :checked

# Pure CSS Modal Window with :checked

CSSのみで動作するLightboxみたいなモーダルウインドウ(?)です。
CSSのみですのでjQueryやJavaScriptは利用していません。
ただ、如何せん、WEBの業務に従事しているわけでもない素人製なので…(恥)

.modalWindow が Viewport と同じ大きさになりますので、
.modalWindow の中に、お好みのものを、お好みの方法で、お好みの位置に、おいてください。

（demoでは画像を中央に表示させています）

[`demo`](http://bl.ocks.org/feo52/raw/3556c794c931bf962c18/)
[`code`](https://gist.github.com/feo52/3556c794c931bf962c18)

####HTML

```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

```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を出来ないようにしています。