How to use

PopUpWindow at its heart requires only a title and a content for the body to use. The content can be supplied as a string of HTML, a DOM element, or the response from an AJAX call. The simplest example is to pull the content as a DOM element (presumably on domready, so that it doesn't show in the normal page flow):

<div id="popUpContent">
  <p>This is simple, static content for my pop up window.</p>
</div>

Our JavaScript to create a pop up window is this:

var myPopUp = new PopUpWindow('My PopUp Window', { contentDiv: 'popUpContent' });

To open it:

myPopUp.open();

PopUpWindow offers a few convenience methods for positioning the window:

• setPosition(options) is a wrapper for calling Element.position on the pop up window div.
• positionTo(relativeTo, xOffset, yOffset), a lazy man's shortcut to a useful set of Element.position() options. Useful when a pop up should appear in proximity to the button or link which triggered its opening.

Popupwindow Options

There are a few options of PopUpWindow to customize its behavior:

• width, top, left and zIndex control corresponding CSS properties of the window div.
• isDraggable, isClosable and isResizable control the behaviors available to the window.
• resizeLimits describes the min and max sizes along the x and y axis (applicable only for resizable windows).
• contentDiv, when supplied, is used to load content from a DOM element (and remove it from its original position in the document body).
• URL, when supplied, is used to load content via AJAX.
• onOpen, onClose, and onResize are event handlers.

Dependencies

core:1.4.2/Events
core:1.4.2/Options
core:1.4.2/Element.Event
core:1.4.2/Element.Style
core:1.4.2/Element.Dimensions
more:1.4.0.1/Drag.Move
more:1.4.0.1/Element.Position

Screenshots

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.