Fire JS Bin - Avgrund

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

/**
 *  jQuery Avgrund Popin Plugin
 *  Inspired by concept in vanilla js - https://github.com/hakimel/Avgrund/
 * 
 *  MIT licensed, (c) 2012 http://pixelhunter.me/
 */

(function($) {
	$.fn.avgrund = function(options) {
		var defaults = {
			width: 380, // max = 640
			height: 280, // max = 350
			showClose: false,
			showCloseText: '',
			closeByEscape: true,
			closeByDocument: true,
			holderClass: '',
			overlayClass: '',
			enableStackAnimation: false,
			onBlurContainer: '',
			template: '<p>This is test popin content!</p>'
		};
		var options = $.extend(defaults, options);

return this.each(function() {
			var body = $('body'),
				maxWidth = options.width > 640 ? 640 : options.width,
				maxHeight = options.height > 350 ? 350 : options.height;

body.addClass('avgrund-ready');
			body.append('<div class="avgrund-overlay ' + options.overlayClass + '"></div>');				
			body.append('<div class="avgrund-popin ' + options.holderClass + '">' + options.template + '</div>');

$('.avgrund-popin').css({
				'width': maxWidth + 'px',
				'height': maxHeight + 'px',
				// 'top': $(window).height()/2 -maxHeight/2,
				// 'left': $(window).width()/2 - maxWidth/2
				'margin-left': '-' + (maxWidth / 2 + 10) + 'px',
				'margin-top': '-' + (maxHeight / 2 + 10) + 'px'
			});

if (options.showClose == true) {
				$('.avgrund-popin').append('<a href="#" class="avgrund-close">' + options.showCloseText + '</a>');
			}

if (options.enableStackAnimation == true) {
				$('.avgrund-popin').addClass('stack');
			}

if (options.onBlurContainer != '') {
				$(options.onBlurContainer).addClass('avgrund-blur');
			}

// close popup by clicking Esc button
			function onDocumentKeyup(e) {
				if (options.closeByEscape == true) {
					if (e.keyCode === 27) {
						deactivate();
					}
				}
			}

// close popup only by 'close' button or by click on document too
			function onDocumentClick(e) {
				if (options.closeByDocument == true) {
					if ($(e.target).is('.avgrund-overlay, .avgrund-close')) {
						deactivate();
					}
				} else {
					if ($(e.target).is('.avgrund-close')) {
						deactivate();
					}
				}
			}

// show popup
			function activate() {
				body.bind('keyup', onDocumentKeyup);
				body.bind('click', onDocumentClick);

body.addClass('avgrund-active');
			}

// hide popup
			function deactivate() {
				body.unbind('keyup', onDocumentKeyup);
				body.unbind('click', onDocumentClick);

body.removeClass('avgrund-active');
			}

// init on click
			$(this).click(function(e) {
				e.stopPropagation();

activate();
			});
		});

}
})(jQuery)

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="author" content="Dmitri Voronianski">
	<title>jQuery plugin for Avgrund concept popin</title>
	<link href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400,300&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="http://labs.voronianski.com/media/style/reset.css">
	<link rel="stylesheet" href="http://labs.voronianski.com/jquery.avgrund.js/style.css">
	
	
</head>
<body>
	<div class="container">
		<h1>Avgrund Modal.</h1>
		<p>Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior). Tested with jQuery 1.4+, file size is under 2Kb, MIT Licensed.</p>

<div class="buttons">
			<a href="#" id="show" class="button left">Show it</a>
			<a href="/jquery.avgrund.js_v1_1.zip" class="button download left">Download source</a>
		</div>

<p class="clear">You can simply init Avgrund with one line and linking 'avgrund.css' file:</p>
		<pre>$('element').avgrund();</pre>

<p>Avgrund has several options for you to customize it easily:</p>
		<pre>$('element').avgrund({			
	width: 380, // max is 640px
	height: 280, // max is 350px
	showClose: false, // switch to 'true' for enabling close button 
	showCloseText: '', // type your text for close button
	closeByEscape: true, // enables closing popup by 'Esc'..
	closeByDocument: true, // ..and by clicking document itself
	holderClass: '', // lets you name custom class for popin holder..
	overlayClass: '', // ..and overlay block
	enableStackAnimation: false, // another animation type
	onBlurContainer: '', // enables blur filter for specified block 
	template: 'Your content goes here..'
});</pre>
		<p>Avgrund plugin was inspired by Hakim's Avgrund.js <a href="https://github.com/hakimel/avgrund/" target="_blank">demo</a>.</p>

<div class="socials">
			<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://labs.voronianski.com/jquery.avgrund.js/" data-text="Avgrund Modals jQuery Plugin" data-via="voronianski" data-hashtags="jquery,avgrund,js">Tweet</a>
			<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<div class="right">
				<span>©2012</span>
				<a href="http://twitter.com/voronianski/" target="blank">@voronianski</a> /
				<a href="http://pixelhunter.me/" target="blank">pixelhunter.me</a> 
			</div>
		</div>
	</div>

html, body {
	height: 100%;
	overflow: auto; /* TIP: set it to 'auto' if you have long content pages */
}

.avgrund-popin {
	position: fixed;
	background: #fff;
	padding: 10px;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	filter: alpha(opacity=0);
	top: 50%;
	left: 50%;
	z-index: 1000;
	box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .5);

-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}

.avgrund-overlay {
	background: #000;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 101;
	visibility: hidden;
	opacity: 0;
	filter: alpha(opacity=0);
}

body.avgrund-ready, 
.avgrund-ready .avgrund-popin, 
.avgrund-ready .avgrund-overlay {
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

-webkit-transition: 0.3s all ease-out;
	-moz-transition: 0.3s all ease-out;
	-ms-transition: 0.3s all ease-out;
	-o-transition: 0.3s all ease-out;
	transition: 0.3s all ease-out;
}

body.avgrund-active {
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-ms-transform: scale(0.9);
	-o-transform: scale(0.9);
	transform: scale(0.9);
	/*overflow: hidden; /* TIP: disables scrolling for long documents */
}

.avgrund-active .avgrund-popin {
	visibility: visible;
	opacity: 1;
	filter: alpha(opacity=100);

-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

.avgrund-active .avgrund-overlay {
	visibility: visible;
	opacity: .5;
	filter: alpha(opacity=50);
}

.avgrund-popin.stack {
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
}

.avgrund-active .avgrund-popin.stack {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

.avgrund-active .avgrund-blur {
	-webkit-filter: blur(1px);
	-moz-filter: blur(1px);
	-ms-filter: blur(1px);
	-o-filter: blur(1px);
	filter: blur(1px);
}

Pop out