Lightweight Multifunctional Popup Window Plugin - jQuery popup.js

A lightweight (~2.15kb minified and gzipped) yet customizable and powerful jQuery popup plugin created for images, AJAX contents, HTML elements, Youtube videos, image galleries and much more.

More features:

• Custom content types.
• Error handling.
• Callback functions.
• Content loader.
• Custom animations.
• Cross-browser.

How to use it:

1. Include jQuery library and the jQuery popup.js plugin's files as usual.

<link href="popup.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="jquery.popup.js"></script>

2. Display your images, websites, inline elements or AJAX contents in the popup window.

<a href="1.jpg" class="basic">Image</a>
<a href="https://www.jqueryscript.net" class="basic">External URL</a>
<a href="ajax.html" class="basic">AJAX</a>
<a href="#inline" class="basic">Inline</a>
<div id="inline" style="display:none">
  <p><em>This</em> is some <strong>content</strong>.</p>
</div>

$('.basic').popup();

3. You can also specify the content to display using JavaScript as follows:

$('.demo').popup({
  content: 'any content or function here'
});

4. Create a custom content type. In this example, we're going to display a Youtube video in the popup.

$('.demo').popup({
  types: {
    youtube: function(content, callback){
    content = '<iframe width="420" height="315" src="'+content+'" frameborder="0" allowfullscreen></iframe>';
    // Don't forget to call the callback!
    callback.call(this, content);
    }
  },
  width: 420,
  height: 315
});

5. Customize the content loader.

$('.demo').popup({
  preloaderContent: '<img src="preloader.gif" class="preloader">'
});

6. All possible options with default values.

$('.demo').popup({
  // Markup
  backClass : 'popup_back',
  backOpacity : 0.7,
  containerClass : 'popup_cont',
  closeContent : '<div class="popup_close">&times;</div>',
  markup : '<div class="popup"><div class="popup_content"/></div>',
  contentClass : 'popup_content',
  preloaderContent : '<p class="preloader">Loading</p>',
  activeClass : 'popup_active',
  hideFlash : false,
  speed : 200,
  popupPlaceholderClass : 'popup_placeholder',
  keepInlineChanges :  true,

  // Content
  modal : false,
  content : null,
  type : 'auto', // 'inline', 'image', 'external', 'html', 'jquery', 'ajax', 'function'
  width : null,
  height : null,

  // Params
  typeParam : 'pt',
  widthParam : 'pw',
  heightParam : 'ph',
});

7. Callback functions.

$('.demo').popup({
  // Callbacks
  beforeOpen : function(type){},
  afterOpen : function(){},
  beforeClose : function(){},
  afterClose : function(){},
  error : function(){},
  show : function($popup, $back){

    var plugin = this;

    // Center the popup
    plugin.center();

    // Animate in
    $popup
      .animate({opacity : 1}, plugin.o.speed, function(){
        // Call the open callback
        plugin.o.afterOpen.call(plugin);
      });

  },
  replaced : function($popup, $back){

    // Center the popup and call the open callback
    this
      .center()
      .o.afterOpen.call(this);

  },
  hide : function($popup, $back){

    if( $popup !== undefined ){

      // Fade the popup out
      $popup.animate({opacity : 0}, this.o.speed);

    }

  }
});

---

This awesome jQuery plugin is developed by loyous. For more Advanced Usages, please check the demo page or visit the official website.