").attr("id","popdown-opacity").css({position:"absolute",top:0,left:0,width:o(document).outerWidth(!0),height:o(document).outerHeight(!0),zIndex:99998,display:"none"}),container=o('

').attr("id","popdown-dialog").css({maxWidth:t.width,height:t.height,zIndex:99999,margin:"0 auto",position:"relative",display:"none"}),o("body").append(opacity),o("#popdown-opacity").fadeIn(100).append(container),o("#popdown-opacity").append(container).stop().animate({opacity:1},100,function(){o("#popdown-dialog").fadeIn(50,function(){o.get(n,function(n){o("#popdown-dialog").html(n).addClass("popdown-done").removeClass("popdown-loading"),o("html, body").animate({scrollTop:0},"fast")})})})},o.fn.close_popdown=function(){o("#popdown-opacity").length>0&&o("#popdown-dialog").stop().animate({opacity:0,height:0},200,function(){o("#popdown-opacity").remove()})},o.fn.popdown=function(n){var t={width:610,height:"auto"},n=o.extend(t,n);return o(window).resize(function(){o("#popdown-opacity").length>0&&o("#popdown-opacity").css({width:o(document).outerWidth(),height:o(document).outerHeight()})}),o(document).keyup(function(n){27===n.keyCode&&o.fn.close_popdown()}),o(document).on("click",".close-popdown",function(n){o(this).is(".close-popdown")||n.preventDefault(),o.fn.close_popdown()}),o(document).click(function(n){o(n.target).closest("#popdown-dialog").length||o("#popdown-dialog").is(":visible")&&o.fn.close_popdown()}),this.each(function(){var t=o(this);t.bind("click",function(p){t.is("a")&&p.preventDefault(),o("#popdown-opacity").is(":visible")?o.fn.close_popdown():t.data("uri")?o.fn.show_popdown(t.data("uri"),n):t.attr("href")?o.fn.show_popdown(t.attr("href"),n):alert("No popdown dialog set for this action.")})})}}(jQuery); 12 | -------------------------------------------------------------------------------- /css/jquery.popdown.css: -------------------------------------------------------------------------------- 1 | /*--------------------------------------------------- 2 | LESS Elements 0.9 3 | --------------------------------------------------- 4 | A set of useful LESS mixins 5 | More info at: http://lesselements.com 6 | ---------------------------------------------------*/ 7 | /* --------------------------------------------- */ 8 | /* Popdown Plugin Styling */ 9 | /* --------------------------------------------- */ 10 | /* The dark transparent background */ 11 | #popdown-opacity { 12 | background: url(../img/blend-bg.png) repeat; 13 | } 14 | /* The white dialog itself */ 15 | #popdown-dialog { 16 | background-color: #fff; 17 | -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 18 | -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 19 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 20 | } 21 | #popdown-dialog .body { 22 | padding: 30px; 23 | } 24 | /* The dialog loading indicator */ 25 | .popdown-loading { 26 | padding: 20px; 27 | background: url(../img/popdown-loading.gif) no-repeat center center; 28 | } 29 | /* Added to dialog when loading is complete */ 30 | /* --------------------------------------------- */ 31 | /* Your Styling Styling */ 32 | /* --------------------------------------------- */ 33 | div.popdown-content { 34 | /* endof footer */ 35 | 36 | } 37 | div.popdown-content header h2 { 38 | margin: 0; 39 | padding: 0; 40 | background-color: #f0f0f0; 41 | font-size: 16px; 42 | text-align: left; 43 | padding: 15px 10px; 44 | font-weight: 400; 45 | font-family: "Helvetica Neue", Helvetica, "pragmatica-web", Arial, sans-serif; 46 | color: #464646; 47 | } 48 | div.popdown-content section.body { 49 | padding: 20px; 50 | text-align: left; 51 | } 52 | div.popdown-content section.body h3 { 53 | margin: 0; 54 | padding: 0; 55 | font-size: 18px; 56 | color: #727272; 57 | font-family: "Helvetica Neue", Helvetica, "pragmatica-web", Arial, sans-serif; 58 | } 59 | div.popdown-content section.body p { 60 | font-size: 16px; 61 | color: #B3B3B1; 62 | } 63 | div.popdown-content footer { 64 | padding: 0px 20px 20px 0; 65 | text-align: right; 66 | } 67 | div.popdown-content footer button { 68 | margin: 0; 69 | padding: 0; 70 | padding: 10px 30px; 71 | background-color: #3BB69E; 72 | border: none; 73 | font-size: 12px; 74 | cursor: pointer; 75 | outline: none; 76 | color: #fff; 77 | text-transform: uppercase; 78 | -webkit-border-radius: 5px; 79 | -moz-border-radius: 5px; 80 | border-radius: 5px; 81 | } 82 | div.popdown-content footer button:hover { 83 | background-color: #329c87; 84 | } 85 | /* endof div.popdown-content*/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jQuery Popdown Plugin 2 | ============== 3 | 4 | What is a popdown? It's a simple dialog that pops down from the top of your browser window once it's loaded HTML in the background. A simple way to load web forms, content, user feedback messages, media and any other in place style content. 5 | 6 | It's lightweight (4kb) and fast, take a look at the demo's: http://wixel.github.io/jquery-popdown 7 | 8 | # How to use it 9 | 10 | 1. Add the `jquery.popdown.css` file to your page. 11 | 2. Add the images inside the `img` to your images directory. 12 | 3. Add the `jquery.popdown.js` file to your page. 13 | 4. Make sure jQuery is already included in your page. 14 | 5. Add links to your page and set their `href` attributes to the pages you want loaded in the Popdowns. 15 | 6. Add `class="popdown"` to the links you added in step 4. 16 | 17 | ```html 18 | Grumpy Demo 19 | Youtube Demo 20 | Content Demo 21 | ``` 22 | 23 | 7. Add the following code: 24 | 25 | ```javascript 26 | $(document).ready(function(){ 27 | $('.popdown').popdown(); 28 | }); 29 | ``` 30 | You can also specify the width of the popdown dialog: 31 | 32 | ```javascript 33 | $(document).ready(function(){ 34 | $('.popdown').popdown({width:700}); 35 | }); 36 | ``` 37 | # Nuts and Bolts 38 | 39 | You can buttons (or other elements) that can automatically close the popdown dialog by simply adding: `class="close-popdown"` to the element inside your popdown content. 40 | example : 41 | 42 | ```html 43 | Close 44 | ``` 45 | 46 | You can fully style the underlying dialog by adjusting the `jquery.popdown.css` or even better, the `jquery.popdown.less` file. 47 | 48 | # License 49 | 50 | The MIT License (MIT) 51 | 52 | Copyright (c) 2014 Wixel Development Team 53 | 54 | Permission is hereby granted, free of charge, to any person obtaining a copy of 55 | this software and associated documentation files (the "Software"), to deal in 56 | the Software without restriction, including without limitation the rights to 57 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 58 | the Software, and to permit persons to whom the Software is furnished to do so, 59 | subject to the following conditions: 60 | 61 | The above copyright notice and this permission notice shall be included in all 62 | copies or substantial portions of the Software. 63 | 64 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 65 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 66 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 67 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 68 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 69 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 70 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | jQuery Popdown Plugin Demo 8 | 9 | 10 | 11 | 91 | 92 | 93 | 94 | Wixel - A custom software development studio 95 | 96 |

jQuery Popdown Plugin

97 | 98 |

99 |

100 | Sometimes you just need a little popdown to spice up your interface. Here are a few examples: 101 |

102 | 103 |

104 | Grumpy Demo 105 | Youtube Demo 106 | Content Demo 107 |

108 | 109 |

110 | 111 |

112 | 113 |

114 | Please share on Twitter 115 | or download over at Github. 116 |

117 |

118 | 119 | 120 | 121 | 122 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /lib/jquery.popdown.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Simple jQuery Popdown Plugin & Content Loader 3 | * 4 | * @author : http://twitter.com/SeanNieuwoudt 5 | * @author : http://twitter.com/wixelhq 6 | * @url : http://github.com/Wixel/jquery-popdown.git 7 | * @copyright: 2015 Wixel 8 | * @license : MIT license 9 | * @version : 1.1 10 | */ 11 | ;(function($){ 12 | 13 | /** 14 | * Generate & display the popdown 15 | * 16 | * @param string uri (content to load) 17 | * @param object options 18 | * @return void 19 | */ 20 | $.fn.show_popdown = function(uri, options) { 21 | 22 | // Remove previous containers if they exist 23 | if($('#popdown-opacity').length > 0) { 24 | $('#popdown-opacity').remove(); 25 | } 26 | 27 | // Construct the background blend 28 | opacity = $('

').attr('id', 'popdown-opacity').css({ 29 | position: 'absolute', 30 | top : 0, 31 | left : 0, 32 | width : $(document).outerWidth(true), 33 | height : $(document).outerHeight(true), 34 | zIndex : 99998, 35 | display : 'none' 36 | }); 37 | 38 | // Construct the content container 39 | container = $('

').attr('id', 'popdown-dialog').css({ 40 | maxWidth : options.width, 41 | height : options.height, 42 | zIndex : 99999, 43 | margin : '0 auto', 44 | position: 'relative', 45 | display : 'none' 46 | }); 47 | 48 | // Let's add the opacity to the doc body 49 | $('body').append(opacity) 50 | 51 | // Fade in the background blend & add content container 52 | $('#popdown-opacity').fadeIn(100).append(container); 53 | 54 | // Fade in the container and load the data 55 | $('#popdown-opacity').append(container).stop().animate({ 56 | opacity: 1.0 57 | }, 100, function() { 58 | $('#popdown-dialog').fadeIn(50, function(){ 59 | $.get(uri, function(resp) { 60 | $('#popdown-dialog').html(resp).addClass('popdown-done').removeClass('popdown-loading'); 61 | $("html, body").animate({ scrollTop: 0 }, "fast"); 62 | }); 63 | }); 64 | }); 65 | } 66 | 67 | /** 68 | * Close the popdown and remove it from the DOM 69 | * 70 | * @return void 71 | */ 72 | $.fn.close_popdown = function() { 73 | if($('#popdown-opacity').length > 0) { 74 | $('#popdown-dialog').stop().animate({ 75 | opacity:0, 76 | height:0 77 | }, 200, function(){ 78 | $('#popdown-opacity').remove(); 79 | }); 80 | } 81 | } 82 | 83 | /** 84 | * Initialize the popdown plugin 85 | * 86 | * @return void 87 | */ 88 | $.fn.popdown = function(options) { 89 | 90 | var defaults = { 91 | width :610, 92 | height:'auto' 93 | }; 94 | 95 | var options = $.extend(defaults, options); 96 | 97 | // Re-size the opacity when the window is resized 98 | $(window).resize(function() { 99 | if($('#popdown-opacity').length > 0) { 100 | $('#popdown-opacity').css({ 101 | width : $(document).outerWidth(), 102 | height: $(document).outerHeight() 103 | }); 104 | } 105 | }); 106 | 107 | // Bind the document ESC key 108 | $(document).keyup(function(e){ 109 | if(e.keyCode === 27) { 110 | $.fn.close_popdown(); 111 | } 112 | }); 113 | 114 | // General element to close the popdown 115 | $(document).on('click', '.close-popdown', function(e){ 116 | if(!$(this).is('.close-popdown')) { //Only close when someone click on the html element with close-popdown class 117 | e.preventDefault(); 118 | } 119 | $.fn.close_popdown(); 120 | }); 121 | 122 | // Close popdown when user clicks outside its container 123 | $(document).click(function(event) { 124 | if(!$(event.target).closest('#popdown-dialog').length) { 125 | if($('#popdown-dialog').is(":visible")) { 126 | $.fn.close_popdown(); 127 | } 128 | } 129 | }); 130 | 131 | // Bind to each matching element 132 | return this.each(function() { 133 | 134 | var self = $(this); 135 | 136 | self.bind('click', function(e){ 137 | 138 | if(self.is('a')) { 139 | e.preventDefault(); 140 | } 141 | 142 | if($('#popdown-opacity').is(':visible')) { 143 | $.fn.close_popdown(); 144 | } else { 145 | if(self.data('uri')) { 146 | $.fn.show_popdown(self.data('uri'), options); 147 | } else if(self.attr('href')) { 148 | $.fn.show_popdown(self.attr('href'), options); 149 | } else { 150 | alert("No popdown dialog set for this action."); 151 | } 152 | } 153 | }); 154 | }); 155 | }; 156 | })(jQuery); 157 | -------------------------------------------------------------------------------- /less/elements.less: -------------------------------------------------------------------------------- 1 | /*--------------------------------------------------- 2 | LESS Elements 0.9 3 | --------------------------------------------------- 4 | A set of useful LESS mixins 5 | More info at: http://lesselements.com 6 | ---------------------------------------------------*/ 7 | 8 | .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { 9 | background: @color; 10 | background: -webkit-gradient(linear, 11 | left bottom, 12 | left top, 13 | color-stop(0, @start), 14 | color-stop(1, @stop)); 15 | background: -ms-linear-gradient(bottom, 16 | @start, 17 | @stop); 18 | background: -moz-linear-gradient(center bottom, 19 | @start 0%, 20 | @stop 100%); 21 | background: -o-linear-gradient(@stop, 22 | @start); 23 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); 24 | } 25 | .bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) { 26 | background: @color; 27 | background: -webkit-gradient(linear, 28 | left bottom, 29 | left top, 30 | color-stop(0, rgb(@start,@start,@start)), 31 | color-stop(1, rgb(@stop,@stop,@stop))); 32 | background: -ms-linear-gradient(bottom, 33 | rgb(@start,@start,@start) 0%, 34 | rgb(@stop,@stop,@stop) 100%); 35 | background: -moz-linear-gradient(center bottom, 36 | rgb(@start,@start,@start) 0%, 37 | rgb(@stop,@stop,@stop) 100%); 38 | background: -o-linear-gradient(rgb(@stop,@stop,@stop), 39 | rgb(@start,@start,@start)); 40 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start))); 41 | } 42 | .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) { 43 | border-top: solid 1px @top-color; 44 | border-left: solid 1px @left-color; 45 | border-right: solid 1px @right-color; 46 | border-bottom: solid 1px @bottom-color; 47 | } 48 | .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) { 49 | -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); 50 | -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); 51 | box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); 52 | } 53 | .rounded(@radius: 2px) { 54 | -webkit-border-radius: @radius; 55 | -moz-border-radius: @radius; 56 | border-radius: @radius; 57 | } 58 | .border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { 59 | -webkit-border-top-right-radius: @topright; 60 | -webkit-border-bottom-right-radius: @bottomright; 61 | -webkit-border-bottom-left-radius: @bottomleft; 62 | -webkit-border-top-left-radius: @topleft; 63 | -moz-border-radius-topright: @topright; 64 | -moz-border-radius-bottomright: @bottomright; 65 | -moz-border-radius-bottomleft: @bottomleft; 66 | -moz-border-radius-topleft: @topleft; 67 | border-top-right-radius: @topright; 68 | border-bottom-right-radius: @bottomright; 69 | border-bottom-left-radius: @bottomleft; 70 | border-top-left-radius: @topleft; 71 | .background-clip(padding-box); 72 | } 73 | .opacity(@opacity: 0.5) { 74 | -moz-opacity: @opacity; 75 | -khtml-opacity: @opacity; 76 | -webkit-opacity: @opacity; 77 | opacity: @opacity; 78 | @opperc: @opacity * 100; 79 | -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})"; 80 | filter: ~"alpha(opacity=@{opperc})"; 81 | } 82 | .transition-duration(@duration: 0.2s) { 83 | -moz-transition-duration: @duration; 84 | -webkit-transition-duration: @duration; 85 | -o-transition-duration: @duration; 86 | transition-duration: @duration; 87 | } 88 | .transform(...) { 89 | -webkit-transform: @arguments; 90 | -moz-transform: @arguments; 91 | -o-transform: @arguments; 92 | -ms-transform: @arguments; 93 | transform: @arguments; 94 | } 95 | .rotation(@deg:5deg){ 96 | .transform(rotate(@deg)); 97 | } 98 | .scale(@ratio:1.5){ 99 | .transform(scale(@ratio)); 100 | } 101 | .transition(@duration:0.2s, @ease:ease-out) { 102 | -webkit-transition: all @duration @ease; 103 | -moz-transition: all @duration @ease; 104 | -o-transition: all @duration @ease; 105 | transition: all @duration @ease; 106 | } 107 | .inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) { 108 | -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); 109 | -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); 110 | box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); 111 | } 112 | .box-shadow(@arguments) { 113 | -webkit-box-shadow: @arguments; 114 | -moz-box-shadow: @arguments; 115 | box-shadow: @arguments; 116 | } 117 | .box-sizing(@sizing: border-box) { 118 | -ms-box-sizing: @sizing; 119 | -moz-box-sizing: @sizing; 120 | -webkit-box-sizing: @sizing; 121 | box-sizing: @sizing; 122 | } 123 | .user-select(@argument: none) { 124 | -webkit-user-select: @argument; 125 | -moz-user-select: @argument; 126 | -ms-user-select: @argument; 127 | user-select: @argument; 128 | } 129 | .columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) { 130 | -moz-column-width: @colwidth; 131 | -moz-column-count: @colcount; 132 | -moz-column-gap: @colgap; 133 | -moz-column-rule-color: @columnRuleColor; 134 | -moz-column-rule-style: @columnRuleStyle; 135 | -moz-column-rule-width: @columnRuleWidth; 136 | -webkit-column-width: @colwidth; 137 | -webkit-column-count: @colcount; 138 | -webkit-column-gap: @colgap; 139 | -webkit-column-rule-color: @columnRuleColor; 140 | -webkit-column-rule-style: @columnRuleStyle; 141 | -webkit-column-rule-width: @columnRuleWidth; 142 | column-width: @colwidth; 143 | column-count: @colcount; 144 | column-gap: @colgap; 145 | column-rule-color: @columnRuleColor; 146 | column-rule-style: @columnRuleStyle; 147 | column-rule-width: @columnRuleWidth; 148 | } 149 | .translate(@x:0, @y:0) { 150 | .transform(translate(@x, @y)); 151 | } 152 | .background-clip(@argument: padding-box) { 153 | -moz-background-clip: @argument; 154 | -webkit-background-clip: @argument; 155 | background-clip: @argument; 156 | } --------------------------------------------------------------------------------

Grumpy no more?

What does the fox say?

Lorem Ipsum?

Finibus Bonorum et Malorum

jQuery Popdown Plugin