e-orlov/Popups without Javascript

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Popup without Javascript</title>
	<link rel="stylesheet" href="/style.css" />
</head>

<body>
	<h1>Popup without javascript demo></h1>
	<p><a href="#my_popup">Open popup</a></p>
	<p>HTML visible body ends here</p>

	<!--
	Popup: the key is that id of <a> tag below is the same as href of <a> tag above
	- that's what opens popup
	<a> below serves several purposes:
		1) popup background covering the whole window,
		2) anchor to show popup when #my_popup is in URL,
		3) link to close popup - if you click the background popup disappears
	-->
	<a id="my_popup" href="#" class="popup"></a>
	<div class="popup">
	<h3>My popup heading</h3>
	<p>Popup content</p>
		<a class="close x" href="#">x</a>
		<a class="close word" href="#">Close</a>
	</div>
</body>

## Popups without Javascript
It's easy to make popup windows without Twitter bootstrap or Javascript.
Example below uses :target pseudoclass to do it.

It adds one extra <a> tag to HTML, used as anchor (see comments in HTML file).
And it adds just 2 lines of CSS to show popup and its background.

You can have as many popups as you need - they will all work.

## style.css
/* popups without javascript */

/* showing popup background */
a.popup:target { display: block; }

/* showing popup */
a.popup:target + div.popup { display: block; }

/* popup target anchor and background */
a.popup {
	/* background is initially hidden */
	display		: none;
	position	: fixed;
	top		: 0;
	left		: 0;
	z-index		: 3; /* anything, really, but bigger than other elements on the page */
	width		: 100%;
	height		: 100%;
	background	: rgba(0, 0, 0, 0.8);
	cursor		: default;
}

/* popup window */
div.popup {
	/* popup window is initially hidden */
	display 	: none;
	background	: white; /* choose your color; */
	width		: 640px; /* width */
	height		: 480px; /* height */
	position	: fixed;
	top		: 50%;
	left		: 50%;
	margin-left	: -320px; /* = -width / 2 */
	margin-top	: -240px; /* = -height / 2 */
	z-index		: 4; /* z-index of popup backgroung + 1 */

	-webkit-box-sizing : border-box;
	-moz-box-sizing	: border-box;
	-ms-box-sizing	: border-box;
	box-sizing	: border-box;
}

/* links to close popup */
div.popup > a.close {
	color		: white;
	position	: absolute;
	font-weight	: bold;
	right		: 10px;
}

div.popup > a.close.word {
	top		: 100%;
	margin-top	: 5px;
}

div.popup > a.close.x {
	bottom		: 100%;
	margin-bottom	: 5px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Popup without Javascript</title>
	<link rel="stylesheet" href="/style.css" />
	</head>

	<body>
	<h1>Popup without javascript demo></h1>
	<p><a href="#my_popup">Open popup</a></p>
	<p>HTML visible body ends here</p>

	<!--
	Popup: the key is that id of <a> tag below is the same as href of <a> tag above
	- that's what opens popup
	<a> below serves several purposes:
	1) popup background covering the whole window,
	2) anchor to show popup when #my_popup is in URL,
	3) link to close popup - if you click the background popup disappears
	-->
	<a id="my_popup" href="#" class="popup"></a>
	<div class="popup">
	<h3>My popup heading</h3>
	<p>Popup content</p>
	<a class="close x" href="#">x</a>
	<a class="close word" href="#">Close</a>
	</div>
	</body>
	It's easy to make popup windows without Twitter bootstrap or Javascript.
	Example below uses :target pseudoclass to do it.

	It adds one extra <a> tag to HTML, used as anchor (see comments in HTML file).
	And it adds just 2 lines of CSS to show popup and its background.

	You can have as many popups as you need - they will all work.
	/* popups without javascript */

	/* showing popup background */
	a.popup:target { display: block; }

	/* showing popup */
	a.popup:target + div.popup { display: block; }

	/* popup target anchor and background */
	a.popup {
	/* background is initially hidden */
	display : none;
	position : fixed;
	top : 0;
	left : 0;
	z-index : 3; /* anything, really, but bigger than other elements on the page */
	width : 100%;
	height : 100%;
	background : rgba(0, 0, 0, 0.8);
	cursor : default;
	}

	/* popup window */
	div.popup {
	/* popup window is initially hidden */
	display : none;
	background : white; /* choose your color; */
	width : 640px; /* width */
	height : 480px; /* height */
	position : fixed;
	top : 50%;
	left : 50%;
	margin-left : -320px; /* = -width / 2 */
	margin-top : -240px; /* = -height / 2 */
	z-index : 4; /* z-index of popup backgroung + 1 */

	-webkit-box-sizing : border-box;
	-moz-box-sizing : border-box;
	-ms-box-sizing : border-box;
	box-sizing : border-box;
	}

	/* links to close popup */
	div.popup > a.close {
	color : white;
	position : absolute;
	font-weight : bold;
	right : 10px;
	}

	div.popup > a.close.word {
	top : 100%;
	margin-top : 5px;
	}

	div.popup > a.close.x {
	bottom : 100%;
	margin-bottom : 5px;
	}