A Pen by Paul.

index.html

<h1>Popup/Modal Windows without JavaScript</h1>
<div id="wrapper">
  <p><a class="button" href="#popup1">Click Me</a></p>
	<p><a class="button" href="#popup2">Click Me Too</a></p>
</div>

<div id="popup1" class="overlay">
	<div class="popup">
		<h2>Info box</h2>
		<a class="close" href="#">&times;</a>
		<div class="content">
			<p>This is done totally without JavaScript. Just HTML and CSS.</p>
		</div>
	</div>
</div>

<div id="popup2" class="overlay light">
	<a class="cancel" href="#"></a>
	<div class="popup">
		<h2>What the what?</h2>
		<h3>(click outside the popup to close)</h3>
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in elit orci, et tempor ligula. Proin faucibus tellus nec augue ultrices ullamcorper. Etiam vestibulum, elit non facilisis aliquam, neque leo hendrerit mauris, ac placerat mi eros sed est. Suspendisse potenti. Morbi sodales dolor ornare ipsum rhoncus aliquam eleifend neque vehicula. Ut condimentum cursus dolor, quis hendrerit libero facilisis et. Maecenas posuere turpis in est vestibulum varius. Nulla at ullamcorper urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas ullamcorper, metus in vestibulum iaculis, metus nibh rutrum velit, in tempus mi felis eu felis. Donec luctus, elit ac euismod sodales, velit risus eleifend massa, et pellentesque dui justo a nibh. Sed bibendum sodales nunc ullamcorper condimentum. Nunc in velit sapien. Curabitur vel metus non massa vehicula vehicula eget eleifend tellus. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
			<p>Ut vehicula, ligula viverra hendrerit consequat, libero neque vehicula nulla, ac tempus nisi dui sit amet nulla. In sit amet libero a erat scelerisque adipiscing. Duis condimentum mi a nulla lacinia vulputate. Sed sit amet felis sem. Aliquam nec convallis dolor. Etiam enim enim, porttitor at aliquam sit amet, lobortis sit amet tortor. Etiam mi sem, consectetur ut ultrices ac, condimentum eu erat. Ut adipiscing consequat nunc, nec ultrices est ornare in. Aliquam accumsan nulla a orci pellentesque suscipit. Aliquam erat volutpat. Morbi tempor convallis condimentum. Morbi nec lacus nisl, at pharetra mi. Etiam posuere nulla sit amet quam tempus eleifend. Nam aliquam, libero vel hendrerit sodales, massa neque vestibulum elit, vel posuere diam massa aliquam ipsum. Nullam hendrerit laoreet augue ut ultricies. Praesent at euismod neque.</p>
			<p>Nullam eget lectus eget purus malesuada accumsan ac eu nunc. Nulla dapibus rutrum metus sit amet pellentesque. Pellentesque condimentum, tellus id pulvinar vehicula, est velit lobortis est, eget laoreet nisl odio quis erat. Praesent accumsan commodo ligula vitae porta. Cras ac tellus lacus. Donec vestibulum ipsum at tortor rutrum non viverra erat iaculis. Cras hendrerit felis ac velit luctus convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean in lobortis quam. Duis congue dolor sed lorem scelerisque sit amet aliquet libero scelerisque. In magna elit, elementum sed tristique hendrerit, commodo a nibh. Sed mollis dictum lacus, eu volutpat eros pulvinar et. Sed ipsum ligula, convallis sed imperdiet id, placerat auctor lorem. Suspendisse commodo imperdiet nibh, et fringilla urna euismod ultricies. Nullam ullamcorper arcu et dolor hendrerit vel sagittis est venenatis. Nullam malesuada lacus sed diam fermentum ut mattis tortor aliquam.</p>
			<p>Donec sit amet eros massa, tincidunt molestie libero. Sed mi felis, feugiat in vestibulum sit amet, sagittis in neque. Nulla sit amet dui quis est dapibus varius. Aliquam volutpat mattis ligula hendrerit rutrum. Proin pharetra erat tempor neque commodo malesuada. Ut commodo quam sit amet orci posuere eu commodo massa egestas. Aliquam commodo tortor sed nunc varius mattis. Vivamus egestas interdum cursus.</p>
			<p>Maecenas quis sagittis elit. Nunc velit mauris, molestie sed mattis ut, pulvinar congue neque. Nunc auctor, augue sit amet bibendum sollicitudin, mi nisl dictum leo, sit amet porta nunc tellus in nisl. Curabitur id felis velit. In porta dignissim scelerisque. Nulla consequat rhoncus sodales. Fusce elit mauris, ultricies sit amet porta a, congue quis nisl. Donec dignissim ultricies tristique. Vivamus eget tortor purus, eget vulputate dolor. Nunc interdum diam quis nulla aliquam viverra auctor turpis elementum. Vestibulum eget urna purus. Donec et velit eget mi eleifend molestie. Vestibulum porttitor pulvinar nulla sed tempus.</p>
		</div>
	</div>
</div>

Popup-Modal-without-JS.markdown

Popup/Modal without JS

A popup window/modal window experiment based on the :target pseudoclass.

The first popup stays open until you click the "X" to close. The second will close when you click anywhere outside the popup.

A Pen by Paul on CodePen.

License.

style.css

body {
  font-family: Arial, sans-serif;
	background: #ddd;
}

h1 {
	text-align: center;
	font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
	color: #333;
	text-shadow: 0 1px 0 #fff;
	margin: 50px 0;
}

#wrapper {
	width: 100px;
	margin: 0 auto;
	background: #fff;
	padding: 20px;
	border: 10px solid #aaa;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	text-align: center;
}

input[type=button],
input[type=submit],
a.button {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	padding: 5px 10px;
	border: 1px solid #aaa;
	background-color: #eee;
	background-image: -webkit-linear-gradient(top, #fff, #f0f0f0);
	background-image: -moz-linear-gradient(top, #fff, #f0f0f0);
	background-image: -ms-linear-gradient(top, #fff, #f0f0f0);
	background-image: -o-linear-gradient(top, #fff, #f0f0f0);
	background-image: linear-gradient(top, #fff, #f0f0f0);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.15);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.15);
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
	color: #666;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
	cursor: pointer;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
input[type=button]:hover,
input[type=submit]:hover,
a.button:hover {
	border-color: #999;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
input[type=button]:active,
input[type=submit]:active,
a.button:active {
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25) inset;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25) inset;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25) inset;
}


input[type=button]::-moz-focus-inner,
input[type=submit]::-moz-focus-inner {
  padding:0;
  border: 0;
}

.overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.5);
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 200ms;
	-moz-transition: opacity 200ms;
	-ms-transition: opacity 200ms;
	-o-transition: opacity 200ms;
	transition: opacity 200ms;
}

.overlay.light {
	background: rgba(255,255,255,0.5);
}

.overlay a.cancel {
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: default;
}

.overlay .popup {
	margin: 75px auto;
	padding: 20px;
	background: #fff;
	border: 1px solid #666;
	width: 300px;
	-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 50px rgba(0,0,0,0.5);
	box-shadow: 0 0 50px rgba(0,0,0,0.5);
	position: relative;
}

.overlay.light .popup {
	border-color: #aaa;
	-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.25);
	-moz-box-shadow: 0 2px 10px rgba(0,0,0,0.25);
	box-shadow: 0 2px 10px rgba(0,0,0,0.25);
	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-ms-transition: all 200ms;
	-o-transition: all 200ms;
	transition: all 200ms;
	-webkit-transform: matrix(0,0,0,0,0,0);
	-moz-transform: matrix(0,0,0,0,0px,0px);
	-ms-transform: matrix(0,0,0,0,0,0);
	-o-transform: matrix(0,0,0,0,0,0);
	transform: matrix(0,0,0,0,0,0);
}

.popup h2,
.popup h3 {
	margin-top: 0;
	color: #666;
	font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
}

.popup h3 {
	color: #999;
}

.popup .close {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 20px;
	right: 20px;
	opacity: 0.8;
	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-ms-transition: all 200ms;
	-o-transition: all 200ms;
	transition: all 200ms;
	font-size: 24px;
	font-weight: bold;
	text-decoration: none;
	color: #666;
}
.popup .close:hover {
	opacity: 1;
}

.popup .content {
	max-height: 400px;
	overflow: auto;
}

.popup p {
	margin: 0 0 1em;
}
.popup p:last-child {
	margin: 0;
}

.popup ::-webkit-scrollbar {
	width: 10px;
}
.popup ::-webkit-scrollbar-thumb {
	background: #ccc;
	border-left: 5px solid #fff;
	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	-ms-transition: all 200ms;
	-o-transition: all 200ms;
	transition: all 200ms;
}
.popup ::-webkit-scrollbar-thumb:hover {
	background: #aaa;
}
.popup ::-webkit-scrollbar-thumb:active {
	background: #999;
}
.popup ::-webkit-scrollbar-button {
	display: none;
}

#popup2 .popup {
	width: 600px;
}

/** display popup **/

div:target {
	visibility: visible;
	opacity: 1;
}

div.light:target .popup {
	-webkit-transform: matrix(1,0,0,1,0,0);
	-moz-transform: matrix(1,0,0,1,0px,0px);
	-ms-transform: matrix(1,0,0,1,0,0);
	-o-transform: matrix(1,0,0,1,0,0);
	transform: matrix(1,0,0,1,0,0);
}