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. |
