Loading Gif

jQuery Popup plugin

22Aug2012

jQuery Popup plugin

This is a plugin for jQuery which includes custom callable functions to open overlays, open popups, and create custom confirm dialogues.

You can download the plugin by clicking on the link in the downloads section in the sidebar.

To use the built in popup plugin

First copy the popup script to your server. Then include jQuery and the popup script in the head section of your website.

Then initiate the plugin by using the script below (make sure to wrap the script in a document ready or similar function).

The inbuilt options

  • popupSpeed: the speed the popup opens – can be string ‘fast’ or ‘slow’, or an integer in miliseconds ie. 1000
  • overlaySpeed: the speed the overlay opens – can be string ‘fast’ or ‘slow’, or an integer in miliseconds ie. 1000
  • width: the width of the popup – string in ‘px’

The popup title is taken from the links ‘title’ attribute and the content is taken from the links ‘href’ attribute and loaded into the popup via ajax, so if for any reason javascript is disabled the link will still take you to the content.

Anchors on different pages

The plugin can also handle anchors on different pages. If an anchor is set the plugin will get the popup content from the links ‘href’ attribute and filter out the part matching the anchor.

This will populate the popup with the html inside #popupContent from test.html

Most of the popup links are pointed to a file named test.html which looks a little something like below.

Anchors on the same page

The plugin can also deal with anchors on the same page. It gets the elements id from the href then automatically hides the element for you. Once the link is clicked the content of the element is shown in the popup.

Here is an example using the plugins anchor setting.

To use the built in confirm plugin

The in-built confirm plugin is easily styled from the css and has six inbuilt options. It was build to provide a much nicer looking version of the default javascript confirm dialogue.

The inbuilt options

  • question: the question the popup asks – can be any string you want ie: ‘are you sure?’
  • buttonPos: the text of the positive button – can be any string you want ie: ‘yes’
  • buttonNeg: the text of the negative button – can be any string you want ie: ‘no’
  • callback: the function to perform on click of yes or no button – example below
  • popupSpeed: the speed the popup opens – can be string ‘fast’ or ‘slow’, or an integer in miliseconds ie. 1000
  • popupSpeed: the speed the overlay opens – can be string ‘fast’ or ‘slow’, or an integer in miliseconds ie. 1000
  • width: the width of the popup – string in ‘px’

Same as with the popup plugin the confirm title is taken from the links ‘title’ attribute. With the confirm plugin the content is created by the javascript so there is no need for a link in the ‘href’ attribute.

Use of custom functions

You can also use the functions included to open a popup or overlay with ease anywhere else in your javascript in exactly the same way you would use other jQuery functions.

Notes

If other items on the page are appearing above the overlay or popup, then please make sure they have a lower z-index than the overlay/popup.
Also if you want the overlay to appear over flash objects, make sure you set the param ‘wmode’ to transparent.