Skip to content

Instantly share code, notes, and snippets.

@feo52

feo52/index.html

Last active July 16, 2017 15:00
Show Gist options
  • Save feo52/3556c794c931bf962c18 to your computer and use it in GitHub Desktop.
Save feo52/3556c794c931bf962c18 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS Modal Window with :checked
Raw
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<title>Pure CSS Modal Window with :checked</title>
<link rel="stylesheet" href="style.css">
<style>
body{ margin:0; padding:0; }
.modalWindow { opacity: 0; visibility: hidden; } /* for Chrome bug? */
.modalWindow img {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.modalWindow div {
position: absolute;
top: 5%;
left: 5%;
right: 5%;
bottom: 5%;
background-image: url('');
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!-- pink -->
<input class="modalSwitch" type="checkbox" id ="modalSwitch01">
<div class="modalTarget">
<img alt src="http://placehold.jp/ffaaaa/ffffff/160x120.png">
<label class="modalSensor" for="modalSwitch01"></label>
</div>
<div class="modalWindow">
<img alt src="http://placehold.jp/ffaaaa/ffffff/640x480.png">
<label class="modalSensor" for="modalSwitch01"></label>
</div>
<!-- lime -->
<input class="modalSwitch" type="checkbox" id ="modalSwitch02">
<div class="modalTarget">
<img alt src="http://placehold.jp/aaffaa/ffffff/160x120.png">
<label class="modalSensor" for="modalSwitch02"></label>
</div>
<div class="modalWindow">
<label class="modalSensor" for="modalSwitch02"></label>
<img alt src="http://placehold.jp/aaffaa/ffffff/640x480.png">
</div>
<!-- blue -->
<input class="modalSwitch" type="checkbox" id ="modalSwitch03">
<div class="modalTarget">
<img alt src="http://placehold.jp/aaaaff/ffffff/160x120.png">
<label class="modalSensor" for="modalSwitch03"></label>
</div>
<div class="modalWindow">
<div style="background-image: url('http://placehold.jp/aaaaff/ffffff/1920x1440.png');">
<label class="modalSensor" for="modalSwitch03"></label>
</div>
</body>
</html>
Raw
style.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; }
/* ----------------------------------------------------------------------------------------------------- */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment