$(document).ready(function() { $('.popbox').each(function(i) { $.fn.popbox.build(this) }) }); (function($) { $.fn.popbox = function(popboxid, options) { var options = $.extend({}, $.fn.popbox.defaults, options); if (options.buildPopbox === true) { $.fn.popbox.build('#' + popboxid) } $('#' + popboxid).css({ 'background-color': options.background, 'padding-bottom': options.padding }); $('#' + popboxid + ' .popcontainer').css('width', parseInt($('#' + popboxid).css('width')) - options.padding + 'px'); $('#' + popboxid + ' .popcontent').css({ 'background-color': options.background, 'padding-top': options.tail + 'px', 'padding-left': options.padding + 'px' }); $('#' + popboxid + ' .poptop').css({ 'background-color': options.background, 'right': -options.padding + 'px', 'width': options.padding + 'px' }); $('#' + popboxid + ' .poptop .popclose').css({ 'color': options.close.color, 'border-color': options.close.color, 'right': options.close.right + 'px', 'top': options.close.top + 'px', 'font-size': options.close.size + 'px' }); $('#' + popboxid + ' .poptop .popclose').html(options.close.text); $('#' + popboxid + ' .popbottom').css({ 'background-color': options.background, 'margin-left': options.padding + 'px', 'height': options.padding + 'px' }); $('#' + popboxid + ' .popbottom div').css({ 'background-color': options.background, 'height': options.padding + 'px', 'width': options.padding + 'px', 'margin-left': -options.padding + 'px' }); if (options.image != null) { $('#' + popboxid + ' .popcontent').css({ 'background-image': 'url(' + options.image + ')' }); $('#' + popboxid + ' .poptop').css({ 'background-image': 'url(' + options.image + ')' }); $('#' + popboxid + ' .popbottom').css({ 'background-image': 'url(' + options.image + ')' }); $('#' + popboxid + ' .popbottom div').css({ 'background-image': 'url(' + options.image + ')' }) } return this.each(function() { if (options.clickable) { $(this).click(function() { if ($('#' + popboxid).is(':visible')) { conditionalFadeOut(popboxid, options) } else { positionAndFadeIn(this, popboxid, options) } }) } else { $(this).hover(function() { positionAndFadeIn(this, popboxid, options) }, function() { conditionalFadeOut(popboxid, options) }) } }) }; function conditionalFadeOut(popboxid, options) { if (!options.sticky) { $('#' + popboxid).trigger('popclose') } }; function positionAndFadeIn(popper, popboxid, options) { $('#' + popboxid).bind('popclose', function(e) { if (options.beforeClose) options.beforeClose(jPopbox); if (options.afterClose) { $('#' + popboxid).fadeOut(options.fadeOutSpeed, function() { options.afterClose(jPopbox) }) } else { $('#' + popboxid).fadeOut(options.fadeOutSpeed) } }); var jPopper = $(popper); var jPopbox = $('#' + popboxid); var height = jPopper.innerHeight(); var width = jPopper.innerWidth(); var pos = jPopper.position(); jPopbox.css({ 'left': pos.left + options.leftOffset + (width / 2) + 'px', 'top': pos.top + height + options.topOffset + 'px' }); if (options.beforeOpen) options.beforeOpen(jPopbox); if (options.afterOpen) { jPopbox.fadeIn(options.fadeInSpeed, function() { options.afterOpen(jPopbox) }) } else { jPopbox.fadeIn(options.fadeInSpeed) } if (options.sticky && (options.hideClose == false)) { $('#' + popboxid + ' .popclose').show().click(function() { $('#' + popboxid).trigger('popclose') }) } }; $.fn.popbox.defaults = { sticky: false, clickable: false, fadeInSpeed: 900, fadeOutSpeed: 100, leftOffset: -110, topOffset: 3, padding: 12, tail: 24, image: null, background: 'transparent', beforeOpen: null, afterOpen: null, beforeClose: null, afterClose: null, hideClose: false, buildPopbox: false, close: { color: '#000', right: 8, top: 32, size: 12, text: 'X'} }; $.fn.popbox.close = function(item) { $(item).each(function() { $(this).trigger('popclose') }) }; $.fn.popbox.build = function(pop) { var popcontent = $(pop).html(); $(pop).html('<div class="popcontainer"><div class="popcontent"><div class="poptop"><div class="popclose">X</div></div>' + popcontent + '<div class="popnogap"></div></div><div class="popbottom"><div></div></div></div>') } })(jQuery);