vpMiniModal

Mini Modal / Lightbox alternative

by laustdeleuran

JavaScript

// VP Mini Modal
(function( $ ){
  $.fn.vpMiniModal = function(options) {
    var settings = {
      'ajaxFragment':false,
      'animate':true,
      'autoCenter':true,
      'callback':false,
      'contentWidth':false,
      'cssClass':false,
      'duration':250,
      'hijackBackLinks':true,
      'overlayOpacity':0.8,
      'showOverlay':true,
      'updateHash':false
    };
    return this.each(function(){
      // Merge options
      if (options) { 
        $.extend(settings, options);
      }
      
      // Add click behaviour
      $(this).click(function(e){
        // Prevent default behaviour
        e.preventDefault();
        var target = $(this).attr('href');
        
        // Clean up
        $('#vp-modal-overlay, #vp-modal-content, #vp-modal-close').remove();
        
        // Add items
        $('<div id="vp-modal-overlay"></div><div id="vp-modal-content"></div>').hide().appendTo('body');
        var $overlay = $('#vp-modal-overlay');
        var $content = $('#vp-modal-content');
        if (settings.contentWidth) {
          $content.css('width',settings.contentWidth);
        }
        
        // Add classes
        if(settings.cssClass) $overlay.add($content).addClass(settings.cssClass);
        
        // Set up closing function
        var $close = $('#vp-modal-close');
        var close = function() {
          if (settings.animate) {
            $content.add($overlay).fadeOut(settings.duration,function(){ $(this).remove(); });
          } else {
            $content.add($overlay).remove();
          }
        }
        $overlay.add($close).click(close);
        
        // Center content
        var centerContent = function(){
          var top = parseInt(($(window).height() - $content.outerHeight())/2) + $(window).scrollTop();
          $content.css({
            'top': top > 0 ? top : 0,
            'left': parseInt(($(window).width() - $content.outerWidth())/2)
          });
          $overlay.height($(document).height());
    ...