Skip to content

Commit

Permalink
merged pull request voronianski#61 from
Browse files Browse the repository at this point in the history
  • Loading branch information
johnpi committed Dec 18, 2014
2 parents c9e7aa5 + d5e5dd5 commit 44bd9f9
Show file tree
Hide file tree
Showing 6 changed files with 141 additions and 34 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ $('element').avgrund({
height: 280, // max is 350px
showClose: false, // switch to 'true' for enabling close button
showCloseText: '', // type your text for close button
container: $('#container') // the container that gets scaled when the modal is in view
closeByEscape: true, // enables closing popup by 'Esc'..
closeByDocument: true, // ..and by clicking document itself
holderClass: '', // lets you name custom class for popin holder..
Expand Down
17 changes: 8 additions & 9 deletions example/css/style.css
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
body {
background: #FFF;
background: url(http://subtlepatterns.com/patterns/dark_dotted.png) repeat #222;
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;
}
Expand All @@ -21,8 +17,10 @@ h1 {
color: #333;
font-family: 'Headland One', Georgia, serif;
font-size: 40px;
line-height: 50px;
text-align: center;
margin: 0 0 25px;
padding-top: 45px;
}

pre, code {
Expand All @@ -38,9 +36,9 @@ pre, code {
}

.container {
width: 600px;
margin: 0 auto;
padding: 45px 0 0;
padding: 0 30%;
background: #fff;
min-height: 100%;
}

.buttons {
Expand Down Expand Up @@ -77,7 +75,8 @@ pre, code {

.socials {
font-size: 12px;
margin: 10px 0 0;
padding: 20px 0 20px;
text-align: right;
}

/* Custom styles for popin & close button */
Expand Down
111 changes: 111 additions & 0 deletions example/index-long.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!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="./css/style.css">
<link rel="stylesheet" href="../style/avgrund.css">

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container" class="container">
<h1>Avgrund Modal: example with long page.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi.
</p>
<div class="buttons">
<a href="#" id="show" class="button left">Show it</a>
<a href="https://github.com/voronianski/jquery.avgrund.js" class="button download left" target="_blank">Download source</a>
</div>

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

<p>Avgrund has several options for you to customize it easily:</p>

<p>Avgrund plugin was inspired by Hakimel's Avgrund.js <a href="https://github.com/hakimel/avgrund/" target="_blank">demo</a>.</p>

<div class="socials">
<span>&copy;2012</span>
<a href="http://twitter.com/voronianski/" target="blank">@voronianski</a> /
<a href="http://pixelhunter.me/" target="blank">pixelhunter.me</a>
</div>
</div>

<a href="https://github.com/voronianski/jquery.avgrund.js" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../jquery.avgrund.js"></script>
<script>
$(function() {
$('#show').avgrund({
height: 200,
holderClass: 'custom',
showClose: true,
showCloseText: 'close',
onBlurContainer: '',
template: '<p>So implement your design and place content here! If you want to close modal, please hit "Esc", click somewhere on the screen or use special button.</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>'
});
});
</script>
</body>
</html>
23 changes: 3 additions & 20 deletions example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<![endif]-->
</head>
<body>
<div class="container">
<div id="container" 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). File size is under 2Kb, MIT Licensed.</p>

Expand All @@ -27,31 +27,13 @@ <h1>Avgrund Modal.</h1>
<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
openOnEvent: true, // set to 'false' to init on load
setEvent: 'click', // use your event like 'mouseover', 'touchmove', etc.
onLoad: function (elem) { ... }, // set custom call before popin is inited..
onUnload: function (elem) { ... }, // ..and after it was closed
template: 'String content..' // or function (elem) { }, or $('.content')
});</pre>

<p>Avgrund plugin was inspired by Hakimel's Avgrund.js <a href="https://github.com/hakimel/avgrund/" target="_blank">demo</a>.</p>

<div class="socials">
<div class="right">
<span>&copy;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>

Expand All @@ -66,6 +48,7 @@ <h1>Avgrund Modal.</h1>
holderClass: 'custom',
showClose: true,
showCloseText: 'close',
container: $('#container'),
onBlurContainer: '.container',
template: '<p>So implement your design and place content here! If you want to close modal, please hit "Esc", click somewhere on the screen or use special button.</p>' +
'<div>' +
Expand Down
4 changes: 3 additions & 1 deletion jquery.avgrund.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@
setEvent: 'click',
onLoad: false,
onUnload: false,
template: '<p>This is test popin content!</p>'
template: '<p>This is test popin content!</p>',
container : $('#container')
};

options = $.extend(defaults, options);
Expand All @@ -47,6 +48,7 @@
template = typeof options.template === 'function' ? options.template(self) : options.template;

body.addClass('avgrund-ready');
options.container.addClass('avgrund-ready avg-container');

if ($('.avgrund-overlay').length === 0) {
body.append('<div class="avgrund-overlay ' + options.overlayClass + '"></div>');
Expand Down
19 changes: 15 additions & 4 deletions style/avgrund.css
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,20 @@ html, body {
background: #000;
width: 100%;
position: relative;
top: -1500px;
left: 0;
z-index: 101;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: -40;
}

body.avgrund-ready,
.avgrund-ready,
.avgrund-ready .avgrund-popin,
.avgrund-ready .avgrund-overlay {
-webkit-transform-origin: 50% 50%;
Expand All @@ -51,7 +56,7 @@ body.avgrund-ready,
transition: 0.3s all ease-out;
}

body.avgrund-active {
.avgrund-active .avg-container{
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
Expand All @@ -70,13 +75,19 @@ body.avgrund-active {
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
z-index: 40;
}

.avgrund-active .avgrund-overlay {
visibility: visible;
opacity: .5;
filter: alpha(opacity=50);
height: 20000px;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 30;
}

.avgrund-popin.stack {
Expand Down

0 comments on commit 44bd9f9

Please sign in to comment.