Gecko [ www.thearyasamaj.org ]

Name	Size	Permission
popbox.css	1.28 KB	-rw-r--r--
popbox.js	1.57 KB	-rw-r--r--
popbox.min.js	1 KB	-rw-r--r--

Code Editor : popbox.js

(function(){

$.fn.popbox = function(options){
    var settings = $.extend({
      selector      : this.selector,
      open          : '.open',
      box           : '.box',
      arrow         : '.arrow',
      arrow_border  : '.arrow-border',
      close         : '.close'
    }, options);

var methods = {
      open: function(event){
        event.preventDefault();

var pop = $(this);
        var box = $(this).parent().find(settings['box']);

box.find(settings['arrow']).css({'left': box.width()/2 - 10});
        box.find(settings['arrow_border']).css({'left': box.width()/2 - 10});

if(box.css('display') == 'block'){
          methods.close();
        } else {
          box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
        }
      },

close: function(){
        $(settings['box']).fadeOut("fast");
      }
    };

$(document).bind('keyup', function(event){
      if(event.keyCode == 27){
        methods.close();
      }
    });

$(document).bind('click', function(event){
      if(!$(event.target).closest(settings['selector']).length){
        methods.close();
      }
    });

return this.each(function(){
      $(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
      $(settings['open'], this).bind('click', methods.open);
      $(settings['open'], this).parent().find(settings['close']).bind('click', function(event){
        event.preventDefault();
        methods.close();
      });
    });
  }

}).call(this);

${this.title}

Code Editor : popbox.js