Jeegoopopup documentation
Version 1.0.0
Steps required to implement the plugin:
-
Include script references to the jquery library, and to jeegoopopup:
<script type="text/javascript" src="/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/jeegoopopup/jquery.jeegoopopup.1.0.0.min.js"></script>
-
Select a skin from the skins folder and include a reference to the skin's stylesheet:
<link href="/jeegoopopup/skins/blue/style.css" rel="Stylesheet" type="text/css" />
-
Open a popup by calling
$.jeegoopopup.open(options); where options is an object which can be configured with properties and callbacks.
- Close a popup by calling
$.jeegoopopup.close(arguments);
Arguments passed to the close method are passed to the onClose callback of the topmost popup.
- A (new) popup can be opened or closed from within (same domain) iframes by calling window.parent.$.jeegoopopup.open(options); or window.parent.$.jeegoopopup.close(arguments); respectively.
- Public methods.
- Options properties.
- Options callbacks.
- Public properties.
Public methods
Name |
Arguments |
Function |
$.jeegoopopup.open |
options object |
Opens a new popup. |
$.jeegoopopup.close |
any |
Closes the topmost popup. Any arguments passed to this method are passed to the onClose callback of the popup's options object. |
$.jeegoopopup.center |
none |
Centers the topmost popup in both horizontal and vertical direction relative to the window. |
$.jeegoopopup.refresh |
none |
Reloads the popup's iframe if options.url is set. |
Options properties
Name |
Type |
Default value |
Function |
title |
string |
undefined |
Is displayed in the top bar of the popup. |
maxTitleLength |
int |
undefined |
Maximum number of visible title characters. Cropped title is postfixed by three dots. |
url |
string |
undefined |
If set overrides 'html' property. Is used as iframe src for popup content. |
html |
string |
undefined |
Html or text to be displayed as popup content. |
left |
int |
undefined |
Left offset to the window in pixels. Overrides 'right' and 'center' property. |
top |
int |
undefined |
Top offset to the window in pixels. Overrides 'bottom' and 'center' property. |
right |
int |
undefined |
Right offset to the window in pixels. Overrides 'center' property. |
bottom |
int |
undefined |
Bottom offset to the window in pixels. Overrides 'center' property. |
center |
bool |
true |
If true centers the popup horizontally if left or right aren't set and vertically if top or bottom aren't set. |
width |
int/string |
'auto' |
The width in pixels of the popup content. Can be set to 'auto' for displaying images. |
height |
int/string |
'auto' |
The height in pixels of the popup content. Can be set to 'auto' for displaying images. |
scrolling |
string |
'auto' |
Can be set to 'yes', 'no' or 'auto'. Determines if scrollbars should appear in the popup if content is larger than popup width and/or height. |
skinClass |
string |
'jg_popup_basic' |
The css-class of the skin to be used. Is formed by prefixing 'jg_popup_' to the name of the skin folder. |
fixed |
bool |
true |
If true sets the popup's position to fixed. If false sets the popup's position to absolute. |
overlay |
bool |
true |
If true displays an overlay under the popup disabling any interaction with the underlying content. |
overlayColor |
string |
'#000' |
The background color of the overlay. |
opacity |
int |
50 |
The opacity of the overlay, value should be between 0 and 100 where 0 is fully transparant and 100 fully opaque. |
loaderVerticalOffset |
int |
0 |
A centered loader animation is shown while loading the iframe url. This property can be used to offset the loader vertically. |
parentScrolling |
bool |
true |
If false disables scrollbars in the parent window while the popup is open. |
draggable |
bool |
true |
If true a popup can be dragged around the screen via the top bar. |
resizable |
bool |
true |
If true a popup can be resized via the bottom right corner. |
fadeIn |
int |
300 |
The time in milliseconds it takes for the first popup to fade in. |
Options callbacks
Name |
Arguments |
Called on |
onOpen |
none |
Opening a popup via $.jeegoopopup.open(options); Is called after fade-in on first popup or after image load when displaying images. |
onClose |
Any arguments passed to $.jeegoopopup.close(arguments); |
Closing a popup via $.jeegoopopup.close(arguments); or clicking the close button of a popup. |
onDragStart |
popup's options |
Mousedown on popup's top bar if popup's options.draggable = true. |
onDrag |
popup's options |
Dragging popup. |
onDragEnd |
popup's options |
Ending drag via mouseup. |
onResizeStart |
popup's options |
Mousedown on popup's lower right corner if popup's options.resizable = true. |
onResize |
popup's options |
Resizing popup by dragging lower right corner. |
onResizeEnd |
popup's options |
Ending resize via mouseup.. |
Public properties
The value of a property can be retrieved by calling it without arguments, e.g.
var opacity = $.jeegoopopup.opacity();
The value can be set by passing an argument, e.g.
$.jeegoopopup.opacity(50);
Calls can be chained, e.g.
$.jeegoopopup.opacity(50).width(500).height(400).skinClass('jg_popup_clean');
Name |
Type |
Function |
$.jeegoopopup.opacity |
int (0 - 100) |
Gets or sets the options.opacity property of the topmost popup. On set the overlay's opacity is updated with this value. |
$.jeegoopopup.overlay |
bool |
Gets or sets the options.overlay property of the topmost popup. On set the overlay is turned on or off by passing true or false. |
$.jeegoopopup.overlayColor |
string |
Gets or sets the options.overlayColor property of the topmost popup. On set the overlay's background color is updated with this value. |
$.jeegoopopup.draggable |
bool |
Gets or sets the options.draggable property of the topmost popup. On set turns draggable on or off by passing true or false. |
$.jeegoopopup.resizable |
bool |
Gets or sets the options.resizable property of the topmost popup. On set turns resizable on or off by passing true or false. |
$.jeegoopopup.fixed |
bool |
Gets or sets the options.fixed property of the topmost popup. On set switches popup's positioning to 'fixed' or 'absolute' by passing true or false. |
$.jeegoopopup.width |
int |
Gets or sets the options.width property of the topmost popup. On set adjusts width of the popup. |
$.jeegoopopup.height |
int |
Gets or sets the options.height property of the topmost popup. On set adjusts height of the popup. |
$.jeegoopopup.top |
int |
Gets or sets the options.top property of the topmost popup. On set adjusts the popup's top offset relative to the window. |
$.jeegoopopup.left |
int |
Gets or sets the options.left property of the topmost popup. On set adjusts the popup's left offset relative to the window. |
$.jeegoopopup.right |
int |
Gets or sets the options.right property of the topmost popup. On set adjusts the popup's right offset relative to the window and resets the popup's left offset. |
$.jeegoopopup.bottom |
int |
Gets or sets the options.bottom property of the topmost popup. On set adjusts the popup's bottom offset relative to the window and resets the popup's top offset. |
$.jeegoopopup.title |
string |
Gets or sets the options.title property of the topmost popup. |
$.jeegoopopup.maxTitleLength |
int |
Gets or sets the options.maxTitleLength property of the topmost popup. On set crops the title to this length. |
$.jeegoopopup.skinClass |
string |
Gets or sets the options.skinClass property of the topmost popup. On set changes the skin of the popup. |
$.jeegoopopup.parentScrolling |
bool |
Gets or sets the options.parentScrolling property of the topmost popup. On set enables or disables scrollbars on the parent window by passing true or false. |