Based on: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

index.html

<a class="button" href="#openModal">Open it up!</a>

<div id="openModal" class="modalbg">
  <div class="dialog">
    <a href="#close" title="Close" class="close">X</a>
  	<h2>Holy Crap!!!</h2>
		<p>You freakin' did it!</p>
		<p>You opened up the freakin' modal window! Now close it, ya dingus.</p>
    <p class="fineprint">Based on the article "Creating a modal window with HTML5 & CSS3" at <a href="webdesignerdepot.com">Webdesigner Depot</a></p>
    <p class="fineprint">p.s. Sorry for calling you a dingus earlier.</p>
	</div>
</div>

script.js

/* sorry for the sloppy less. */
/* don't tell Jen Myers */

style.less

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

.transition (@time: .5s, @range: all, @ease: ease-out) {
  -moz-transition: @range @time @ease;
  -webkit-transition: @range @time @ease;
  -o-transition: @range @time @ease;
  transition: @range @time @ease;
}

.transition-delay (@time: .4s) {
	-webkit-transition-delay: @time;  
	-moz-transition-delay: @time;  
	-o-transition-delay: @time;  
	-transition-delay: @time; 
}

.border-radius(@radius) {
	-moz-border-radius:@radius;
	-webkit-border-radius:@radius; 
  border-radius: @radius;
}

.gradient (@coler1: #fff, @coler2: #ccc) {
    background: @coler1;
    background: -moz-linear-gradient(@coler1, @coler2);
    background: -webkit-linear-gradient(@coler1, @coler2);
    background: -o-linear-gradient(@coler1, @coler2);
}

.box-shadow(@dims:0 0 10px, @color:#000) {
	box-shadow: @dims @color; // Opera, FFX4
	-moz-box-shadow:@dims @color; // FFX3.5
	-webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit
	.ie7 { filter: e(%("progid:DXImageTransform.Microsoft.Shadow(color='%d', Direction=135, Strength=3)", @color)); }
}

.inset(@dims:1px 1px 1px, @color:#fff) {
    box-shadow: @dims @color; // Opera, FFX4
    -moz-box-shadow:@dims @color; // FFX3.5
    -webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit
}

body { 
  width: 100%; 
  background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}


.button {
  margin: 40px;
  font-size: 72px;
  font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
  text-decoration: none;
  text-shadow: 1px 1px 0px #fff;
  font-weight: 400; 
  color: #666;
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 20px 70px 30px;
  position: relative;
  top: 50px;
  left: 30%;
  background: #eee;
  .inset;
  .border-radius(5px);
  .transition;
  &:hover{ color: #333; background: #eeffff; .transition;}
}

.modalbg {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0);
	z-index: 99999;
	.transition(2s);
  .transition-delay(.2s);
	display: block;
	pointer-events: none;
  .dialog {
    width: 400px;
    position: relative;
    top: -1000px;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    .border-radius(10px);
    .gradient;
    .box-shadow;
  }
}

.modalbg:target {
	display: block;
	pointer-events: auto;
  background: rgba(4, 10 ,30, .8);
  .transition();
  .dialog {
    top: -90px;
    .transition(.8s);
    .transition-delay;
  }
}



.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
  .box-shadow;
  .transition;
  .transition-delay(.2s);
  &:hover { background: #00d9ff; .transition; }
}

.fineprint {
  font-style: italic;
  font-size: 10px;
  color: #646;
}
a { color: #333; text-decoration: none; }