Popup.js

A barebones, flexible jQuery popup plugin. Designed for developers, it's simple to use but very powerful.

Popup.js can be downloaded from GitHub.

Any issues should also be raised via the GitHub issue system; pull requests welcome!

Place /assets/css/popup.css in /your/css/folder/.

Add this just before your closing head tag:

Then, place /assets/js/popup.min.js in /your/js/folder/.

Add this just before your closing body tag, after you've included jQuery:

<script src="/your/js/folder/jquery.popup.js"></script>

Create your link:

Link

And call the function in the JavaScript:

// Most basic example
$('a.popup').popup();

// Passing in options
var options = { optionName : optionValue };
$('a.popup').popup(options);

There are some demos available over on the demos page.

Forcing a data type

Useful if you dynamically load images (i.e. /assets/image.php?src=image.jpg&width=100), you're passing a content type that can't be auto guessed (i.e. html), or you're passing in a custom content type.

var options = { type : 'image' };
$('a.popup').popup(options);

Forcing specific content

If you want to display the return value from a function, or a jQuery selection object, you'll need to pass it in manually.

var options = { content : $('#content_div') };
$('a.popup').popup(options);

Open on page load

var popup = new $.Popup();
popup.open('link/to/content');

Auto close after X seconds

$('a.popup').popup({
    afterOpen : function(){
        var popup = this;
        setTimeout(function(){
            popup.close();
        }, 2000);
    }
});

Keeping/discarding inline changes

When you specify inline content to load - e.g. content hidden on the page - any changes to the content when the popup is open are kept, so if you open the same popup, the changes will still be there.

However, you can specify that the changes are discarded, so everytime you open the popup, it has the original, unchanged content in it.

$('#link').popup({
    keepInlineChanges : false
})

If you want to see any more examples here, or these aren't explained well enough, let me know!

LOADS of options for this plugin.

NOTE: … denotes omitted code. View the js file for the complete function.

Markup
Option Type Default Description
backClass String 'popup_back' Class of the overlay behind the popup.
backOpacity Number 0.7 Opacity of the overlay.
containerClass String 'popup_cont' Class of the popup container. This container wraps the popup.
closeContent String '<div class="popup_close">×</div>' Content of the close button. Can be a html string or empty. (For no close button.) This is injected into the popup container, just after the popup.
markup String '<div class="popup"><div class="popup_content"/></div>' The markup for the actual popup.
contentClass String 'popup_content' Class of the element the popup content is loaded into. Useful if you change the popup markup.
preloaderContent String '<p class="preloader">Loading</p>' Preloaded content. Can be a HTML string or empty. (For no preloader.) See the demos page for a nice animated GIF example.
activeClass String 'popup_active' Class applied to the active popup link.
hideFlash Boolean false If true, all flash on the pages is hidden while the popup is open. This stops the flash being on top of the popup if it isn't rendered with wmode=transparent.
speed Number 200 Speed at which the overlay and popup fades in/out.
popupPlaceholderClass String poup_placeholder The class given to placehold where to replace the inline content when it's loaded into the popup.
keepInlineChanges Boolean true Keep any changes made to inline content between popup opens.
Content
Option Type Default Description
modal Boolean false If true, the popup can't be closed by clicking the overlay.
content null
type String 'auto' Type of content to be loaded. Useful if you're loading a dynamic image (such as one with a .php extension), or you've set up a custom type in the config.
width null/Number null Width of the popup. Prevents the popup from guessing the width from the content loaded.
height null/Number null Height of the popup. Prevents the popup from guessing the height from the content loaded.
Params
Option Type Default Description
typeParam String 'pt' The parameter used to specify the type of the popup content in a passed URL.
widthParam String 'pw' The parameter used to specify the width of the popup in a passed URL.
heightParam String 'ph' The parameter used to specify the height of the popup in a passed URL.
Callbacks
Option Type Default Description
beforeOpen Function function(type){} Function to be called just before the popup is opened. The type of content is passed in.
afterOpen Function function(){} Function to be called just after the popup has opened.
beforeClose Function function(){} Function to be called just before the popup closes.
afterClose Function function(){} Function to be called just after the popup closes.
error Fucntion function(content, type){} Function to be called if the popup encounters a load error. The content and the type of content is passed in.
show Function function($popup, $back){ … } Function to be called when the popup is showing the content, after beforeOpen is called. Both the popup and the overlay jQuery element are passed in, allowing you to override the default animations. Don't forget to call plugin.o.afterOpen.call(plugin); after your animation has finished if you're using it!
replaced Function function($popup, $back){ … } Function to be called if the popup is already open, and the content is being replaced. Like the show callback, the popup and overlay jQuery elements are passed in. And don't forget to call plugin.o.afterOpen.call(plugin); after your animation has finished if you're using it!
hide Function function($popup, $back){ … } Function to be called when the popup is closing, just after beforeClose is called. $back is animated outside of this function, and so to manipulate it, you'll need to use $back.stop() first. Note that you'll need to call .cleanUp() manually if you do this!
types Object { … } This object determines how different content types load in, which follow a type : callback pattern. You can easily override an existing one (say you want all inline types to be in a wrapper), or you can add your own types. (load in youtube videos, for instance.)

Public methods are called from the Popup.js object, which you can get by either:

// Using the data of the link
var popup = $('a.popup').data('popup');

// Or, if you are using it as a standalone object
var popup = new $.Popup();

// Methods are then called like so
popup.methodName();
.open([content], [type], [ele]):Object
Option Type Default Description
content String|Object|Function options.content Content to be opened. This can be a string (URL, ID of element, HTML), an object (jQuery selection object) or a function. If left blank, it will use the content set in the options.
type String options.type The type of content passed in. This can be left blank if you want the content auto detected, or if you've already specified the type in the options or as a query parameter. This must match a type set in the option types.
ele Object jQuery selection object that has been triggered to open the popup. Specifying this is useful if you highlight the element somehow, or you need a reference to the element. An active class will be added to the element if one is passed.

Use this to open a new popup, or replace a current popup's content.

popup.open('image.png');
popup.open('<h1>New Content</h1>', 'html', $('a.popup'));
.close():Object

Simply, it closes the popup. It should be called from the current Popup object.

Use this if you need to close something automatically, or not via the overlay/close button.

popup.close();
// Or, set via a timeout
setTimeout(function(){
    popup.close();
}, 2000);
.center():Object

Centers the popup. To be used when you append content content dynamically to the popup once it's been opened. Note:.open() automatically calls this by default, unless you've overidden it.

popup.center();
.getCenter()

Returns the top/left co-ordinates to center the popup.

var coords = popup.getCenter();
/*
  {
    top		: XX,
    left	: XX
  }
*/
.cleanUp():Object

A helper function used once the popup has been closed, it removes all the elements and resets the object.

You will rarely need to call this. It is here because if you stop the default animation on the overlay, you'll stop it from being called.