multifunctional popup window - Download Lightweight Multifunctional Popup Window Plugin - jQuery popup.js

Download Lightweight Multifunctional Popup Window Plugin – jQuery popup.js

By Posted on

This time I will share jQuery Plugin and tutorial about Lightweight Multifunctional Popup Window Plugin – jQuery popup.js, hope it will help you in programming stack.

File Size: 12.9 KB
Views Total: 1228
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

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

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

view source
1 <a href="1.jpg" class="basic">Image</a>
2 <a href="https://www.jqueryscript.net" class="basic">External URL</a>
3 <a href="ajax.html" class="basic">AJAX</a>
4 <a href="#inline" class="basic">Inline</a>
5 <div id="inline" style="display:none">
6   <p><em>This</em> is some <strong>content</strong>.</p>
7 </div>
view source
1 $('.basic').popup();

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

view source
1 $('.demo').popup({
2   content: 'any content or function here'
3 });

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

view source
01 $('.demo').popup({
02   types: {
03     youtube: function(content, callback){
04     content = '<iframe width="420" height="315" src="'+content+'" frameborder="0" allowfullscreen></iframe>';
05     // Don't forget to call the callback!
06     callback.call(this, content);
07     }
08   },
09   width: 420,
10   height: 315
11 });

5. Customize the content loader.

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

6. All possible options with default values.

view source
01 $('.demo').popup({
02   // Markup
03   backClass : 'popup_back',
04   backOpacity : 0.7,
05   containerClass : 'popup_cont',
06   closeContent : '<div class="popup_close">&times;</div>',
07   markup : '<div class="popup"><div class="popup_content"/></div>',
08   contentClass : 'popup_content',
09   preloaderContent : '<p class="preloader">Loading</p>',
10   activeClass : 'popup_active',
11   hideFlash : false,
12   speed : 200,
13   popupPlaceholderClass : 'popup_placeholder',
14   keepInlineChanges :  true,
15  
16   // Content
17   modal : false,
18   content : null,
19   type : 'auto', // 'inline', 'image', 'external', 'html', 'jquery', 'ajax', 'function'
20   width : null,
21   height : null,
22  
23   // Params
24   typeParam : 'pt',
25   widthParam : 'pw',
26   heightParam : 'ph',
27 });

7. Callback functions.

view source
01 $('.demo').popup({
02   // Callbacks
03   beforeOpen : function(type){},
04   afterOpen : function(){},
05   beforeClose : function(){},
06   afterClose : function(){},
07   error : function(){},
08   show : function($popup, $back){
09  
10     var plugin = this;
11  
12     // Center the popup
13     plugin.center();
14  
15     // Animate in
16     $popup
17       .animate({opacity : 1}, plugin.o.speed, function(){
18         // Call the open callback
19         plugin.o.afterOpen.call(plugin);
20       });
21  
22   },
23   replaced : function($popup, $back){
24  
25     // Center the popup and call the open callback
26     this
27       .center()
28       .o.afterOpen.call(this);
29  
30   },
31   hide : function($popup, $back){
32  
33     if( $popup !== undefined ){
34  
35       // Fade the popup out
36       $popup.animate({opacity : 0}, this.o.speed);
37  
38     }
39  
40   }
41

Share this:

Related posts: