From 1c6b9b888dfe76e37ae9b646ac978658b9bbaf38 Mon Sep 17 00:00:00 2001 From: Nobita Date: Sat, 28 Jun 2014 03:14:37 +0100 Subject: [PATCH 1/5] fix modal on long pages --- example/css/style.css | 16 ++++----- example/index-long.html | 72 +++++++++++++++++++++++++++++++++++++++++ example/index.html | 22 ++----------- jquery.avgrund.js | 7 ++-- style/avgrund.css | 10 ++++-- 5 files changed, 93 insertions(+), 34 deletions(-) create mode 100644 example/index-long.html diff --git a/example/css/style.css b/example/css/style.css index 30e23ed..4904b8a 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; } @@ -23,6 +19,7 @@ h1 { font-size: 40px; text-align: center; margin: 0 0 25px; + padding-top: 45px; } pre, code { @@ -38,9 +35,9 @@ pre, code { } .container { - width: 600px; - margin: 0 auto; - padding: 45px 0 0; + padding: 0 30%; + background: #fff; + min-height: 100%; } .buttons { @@ -77,7 +74,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..0798d57 --- /dev/null +++ b/example/index-long.html @@ -0,0 +1,72 @@ + + + + + + jQuery plugin for Avgrund concept popin + + + + + + + + +
+

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.

+

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.

+

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.

+

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.

+ +

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.

+

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.

+ +

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.

+

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.

+ + +
+ 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..666e3cc 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 -
diff --git a/jquery.avgrund.js b/jquery.avgrund.js index 12d4108..6d417c1 100644 --- a/jquery.avgrund.js +++ b/jquery.avgrund.js @@ -34,7 +34,10 @@ setEvent: 'click', onLoad: false, onUnload: false, - template: '

This is test popin content!

' + template: '

This is test popin content!

', + + // added + container : $('#container') }; options = $.extend(defaults, options); @@ -46,7 +49,7 @@ maxHeight = options.height > 350 ? 350 : options.height, 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..655cebd 100644 --- a/style/avgrund.css +++ b/style/avgrund.css @@ -35,7 +35,7 @@ html, body { filter: alpha(opacity=0); } -body.avgrund-ready, +.avgrund-ready, .avgrund-ready .avgrund-popin, .avgrund-ready .avgrund-overlay { -webkit-transform-origin: 50% 50%; @@ -51,7 +51,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); @@ -76,7 +76,11 @@ body.avgrund-active { visibility: visible; opacity: .5; filter: alpha(opacity=50); - height: 20000px; + height: 100%; + position: fixed; + top: 0; + left: 0; + right: 0; } .avgrund-popin.stack { From 466a1a62e7797fdabeac4ecf8dc4701ba4d8fbfd Mon Sep 17 00:00:00 2001 From: Nobita Date: Sat, 28 Jun 2014 10:34:36 +0100 Subject: [PATCH 2/5] fixes stack animation --- jquery.avgrund.js | 1 + style/avgrund.css | 9 ++++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/jquery.avgrund.js b/jquery.avgrund.js index 6d417c1..b8a1c87 100644 --- a/jquery.avgrund.js +++ b/jquery.avgrund.js @@ -49,6 +49,7 @@ maxHeight = options.height > 350 ? 350 : options.height, 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) { diff --git a/style/avgrund.css b/style/avgrund.css index 655cebd..275b633 100644 --- a/style/avgrund.css +++ b/style/avgrund.css @@ -27,12 +27,17 @@ 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; } .avgrund-ready, @@ -70,6 +75,7 @@ html, body { -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); + z-index: 40; } .avgrund-active .avgrund-overlay { @@ -81,6 +87,7 @@ html, body { top: 0; left: 0; right: 0; + z-index: 30; } .avgrund-popin.stack { From 124e72febcd4c61b31ee4e366cd83648879d9db9 Mon Sep 17 00:00:00 2001 From: Nobita Date: Sat, 28 Jun 2014 13:51:41 +0100 Subject: [PATCH 3/5] readme update --- README.md | 1 + example/index.html | 1 + jquery.avgrund.js | 2 -- 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8321aab..60dde09 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/index.html b/example/index.html index 666e3cc..e757359 100644 --- a/example/index.html +++ b/example/index.html @@ -48,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 b8a1c87..030e4ec 100644 --- a/jquery.avgrund.js +++ b/jquery.avgrund.js @@ -35,8 +35,6 @@ onLoad: false, onUnload: false, template: '

This is test popin content!

', - - // added container : $('#container') }; From 3e70c51f66b0d46c6579c8b999735de5e7e4de7f Mon Sep 17 00:00:00 2001 From: Nobita Date: Sat, 28 Jun 2014 13:58:32 +0100 Subject: [PATCH 4/5] refactor demo page for long text --- example/css/style.css | 1 + example/index-long.html | 67 ++++++++++++++++++++++++++++++++--------- 2 files changed, 54 insertions(+), 14 deletions(-) diff --git a/example/css/style.css b/example/css/style.css index 4904b8a..5970ca6 100644 --- a/example/css/style.css +++ b/example/css/style.css @@ -17,6 +17,7 @@ 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; diff --git a/example/index-long.html b/example/index-long.html index 0798d57..f52dfca 100644 --- a/example/index-long.html +++ b/example/index-long.html @@ -15,19 +15,58 @@
-

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.

-

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.

-

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.

-

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.

- -

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.

-

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.

- -

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.

-

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.

- - +

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 @@ -58,7 +97,7 @@

Avgrund Modal.

holderClass: 'custom', showClose: true, showCloseText: 'close', - onBlurContainer: '.container', + onBlurContainer: '', 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.

' + '
' + 'Avgrund on Github' + From d5e5dd5c72f02444e45662076a68d2a4d0a7e75a Mon Sep 17 00:00:00 2001 From: Nobita Date: Sat, 28 Jun 2014 13:59:41 +0100 Subject: [PATCH 5/5] fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 60dde09..a7fb99f 100644 --- a/README.md +++ b/README.md @@ -67,7 +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 + 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..