Jeegoopopup documentation

Version 1.0.0

Steps required to implement the plugin:

  1. 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>
  2. 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" />
  3. Open a popup by calling
    $.jeegoopopup.open(options); where options is an object which can be configured with properties and callbacks.
  4. Close a popup by calling
    $.jeegoopopup.close(arguments);
    Arguments passed to the close method are passed to the onClose callback of the topmost popup.
  5. 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.
  1. Public methods.
  2. Options properties.
  3. Options callbacks.
  4. 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.