A Pen by Dmitri Voronianski.

Avgrund-Popup.markdown

Avgrund Popup

Displaying modal windows and show depth between them and document. Using jquery and css3 transitions.

A Pen by Dmitri Voronianski on CodePen.

License.

index.html

<div class="wrap">
  <a href="#" id="show" class="button left">Show it</a>
</div>

script.js

/* Avgrund jQuery plugin
 * Get plugin, see demo and read documentation here - 
 * http://labs.voronianski.com/jquery.avgrund.js/
 * https://github.com/voronianski/jquery.avgrund.js/
 *
 * (c)2012, MIT Licensed, http://pixelhunter.me
*/

$('#show').avgrund({
  height: 200,
  holderClass: 'custom',
  showClose: true,
  showCloseText: 'Close',
  enableStackAnimation: true,
  template: '<p>So implement your design and place content here! If you want to close modal, please hit "Esc", somewhere on the screen or use special button. Enjoy!</p>' +
  		'<div>' +
			'<a href="http://github.com/voronianski/jquery.avgrund.js" target="_blank" class="github">Avgrund on Github</a>' +
			'<a href="http://twitter.com/voronianski" target="_blank" class="twitter">Twitter</a>' +
			'<a href="http://dribbble.com/voronianski" target="_blank" class="dribble">Dribbble</a>' +				
			'</div>'
});

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,300,400&subset=latin,cyrillic);

* { margin: 0; padding: 0; outline: 0; }

body {
  background: #FFF;
	color: #666;
	font: 14px/22px 'Open Sans', Arial, sans-serif;
	text-align: justify;	
}

html {
	background: url(http://subtlepatterns.com/patterns/dark_dotted.png) repeat #222;
}

a {
	color: #ED5E2F;
}

a:hover {
	text-decoration: none;
}

.wrap {
	width: 140px;
	margin: 0 auto;
	padding: 45px 0 0;
}

.button {
	display: block;
	background: #ED5E2F;
	color: #FFF;
	text-decoration: none;
	width: 110px;
	text-align: center;
	padding: 10px;
	margin: 15px 0 0 15px;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 300;
}

.button:hover {
	background: #74A599;
}

.button:active {
	background: #F6A953;
}

/* Custom styles for popin & close button */
.custom {
	color: #555;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.custom p {
	padding: 10px 20px;
	margin: 30px 0 0;
	font-size: 14px;
	font-weight: 300;
	text-align: justify;
}

.avgrund-close {
	display: block;
	text-transform: uppercase;
	color: #555;
	text-decoration: none;
	position: absolute;
	top: 6px;
	right: 10px;
	font-size: 13px;
}

.github, .twitter, .dribble {
	float: left;
	text-align: center;
	font-size: 12px;
	color: white;
	padding: 8px 18px;
	margin: 18px 0 0 20px;
	text-decoration: none;
	-webkit-transition: background 0.3s ease;
	-moz-transition: background 0.3s ease;
	-ms-transition: background 0.3s ease;
	-o-transition: background 0.3s ease;
	transition: background 0.3s ease;
}

.github {
	background: rgba(83, 83, 83, 0.8);
}

.github:hover {
	background: rgba(83, 83, 83, 1);
}

.twitter {
	background: rgba(71, 186, 255, 0.8);
}

.twitter:hover {
	background: rgba(71, 186, 255, 1);
}

.dribble {
	background: rgba(241, 118, 122, 0.8);
}

.dribble:hover {
	background: rgba(241, 118, 122, 1);
}