Ever wanted a nice plugin that you could just insert, and run with it? No major reconfigurations, no extra images, nothing of the sort.
Bad news first!
Here are some of the cons:
– Modern Browser Support only.
– IE 9+
– Chrome 4+ (all)
– FF 3.5+
– Safari 5.1+
– Safari Mobile 5.0+
– Android 4.0+
– Chrome aor FF for Android (all)
– Dependent on jQuery.
And the good news!
Here are some of the pros:
– Resizeable with window if contents are larger than window.
– Multiple levels, stackable.
– Based on jQuery, easy to implement and use.
– Always stays in the center.
– SUPER light!
Take it, make it, minimize it, do whatever to it. Feedback would be appreciated.
vbox-0.1.2
Updated from 0.1.1: Added a resize on any element within that has the class resizable to fit the pop up which fits the window itself.
vbox-1.0.0
Updated from 0.1.2: Added compatibility for other browsers. Added custom fade time.
Usage:
1 | $.fn.vbox('open',{content:'<p>My internal HTML text.</p>'}); |
If you want to read it without opening the file, here you go:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | (function($){ var g_vboxlevel = 0; $(document).on('click','.vbox-close, .fuzz',function(e) { e.stopPropagation(); $.fn.vbox('close'); }).on('click','.vbox-content',function(e){ e.stopPropagation(); }); $(window).on('resize',function(){ $.fn.vbox('resize'); }); $.fn.vbox = function (action,options) { var settings = $.extend({ content: 'sample', speed: 100 },options); var win = $(window); var winH = win.height(); var winW = win.width(); if (action == 'open') { g_vboxlevel++; $('body').append('<div class="fuzz" id="vbox_'+g_vboxlevel+'"><div class="vbox"><div class="vbox-content"><div class="inner-content">'+settings.content+'<a data-id="'+g_vboxlevel+'" href="#" class="vbox-close">×</a></div></div></div></div>'); $thisbox = $(document).find('#vbox_'+g_vboxlevel); $thisbox.animate({opacity:1},settings.speed,function(){ $.fn.vbox('resize'); }); }; if (action == 'close') { $(document).find('#vbox_'+g_vboxlevel).animate({opacity:0},settings.speed,function() { $(this).remove(); }); g_vboxlevel--; }; if (action == 'resize') { $thisbox = $(document).find('#vbox_'+g_vboxlevel); $thisbox.find('.inner-content, .resizable').css({'max-width':(winW - 100) + 'px'}); $thisbox.find('.inner-content, .resizable').css({'max-height':(winH - 100) + 'px'}); } } }(jQuery)); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | .fuzz { position: fixed; background: rgba(0,0,0,0.5); width: 100%; height: 100%; display: table; text-align: center; vertical-align: middle; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; } .fuzz .vbox { display: table-cell; vertical-align: middle; } .fuzz .vbox-content { box-shadow: 0 9px 39px #333; display: inline-block; padding: 20px; background: #fff; position: relative; } .fuzz .inner-content { overflow: auto; border: 1px solid #ccc; padding: 20px; } .fuzz .vbox-close{ position: absolute; font-size: 28px; text-decoration: none; top: -12px; right: -12px; border: 3px solid #fff; box-shadow: 0 0 10px #000; border-radius: 16px; height: 26px; line-height: 22px; background: #000; color: #fff; width: 26px; font-weight: bold; } |
Update:
I’ve managed to make some tweaks with the help from some feedback and the vBox plugin is finally ready for release. Enjoy!