diff --git a/README.md b/README.md index 8321aab..a7fb99f 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,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.. diff --git a/example/css/style.css b/example/css/style.css index 30e23ed..5970ca6 100644 --- a/example/css/style.css +++ b/example/css/style.css @@ -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; } @@ -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 { @@ -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 { @@ -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 */ diff --git a/example/index-long.html b/example/index-long.html new file mode 100644 index 0000000..f52dfca --- /dev/null +++ b/example/index-long.html @@ -0,0 +1,111 @@ + + + + + + jQuery plugin for Avgrund concept popin + + + + + + + + +
+

Avgrund Modal: example with long page.

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+
+ Show it + Download source +
+ +

You can simply init Avgrund with one line:

+ 
$('element').avgrund();
+ +

Avgrund has several options for you to customize it easily:

+ +

Avgrund plugin was inspired by Hakimel's Avgrund.js demo.

+ +
+ ©2012 + @voronianski / + pixelhunter.me +
+
+ + Fork me on GitHub + + + + + + \ No newline at end of file diff --git a/example/index.html b/example/index.html index e0ff8ff..e757359 100644 --- a/example/index.html +++ b/example/index.html @@ -14,7 +14,7 @@ -
+

Avgrund Modal.

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.

@@ -27,31 +27,13 @@

Avgrund Modal.

$('element').avgrund();

Avgrund has several options for you to customize it easily:

- 
$('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')
-});
+

Avgrund plugin was inspired by Hakimel's Avgrund.js demo.

-
©2012 @voronianski / pixelhunter.me -
@@ -66,6 +48,7 @@

Avgrund Modal.

holderClass: 'custom', showClose: true, showCloseText: 'close', + container: $('#container'), onBlurContainer: '.container', template: '

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.

' + '
' + diff --git a/jquery.avgrund.js b/jquery.avgrund.js index 12d4108..030e4ec 100644 --- a/jquery.avgrund.js +++ b/jquery.avgrund.js @@ -34,7 +34,8 @@ setEvent: 'click', onLoad: false, onUnload: false, - template: '

This is test popin content!

' + template: '

This is test popin content!

', + container : $('#container') }; options = $.extend(defaults, options); @@ -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('
'); diff --git a/style/avgrund.css b/style/avgrund.css index 230dea1..275b633 100644 --- a/style/avgrund.css +++ b/style/avgrund.css @@ -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%; @@ -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); @@ -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 {