Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
JavaScript PHP
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
Demo
Docs
ScreenShots first commit
Source
README.md
package.yml

README.md

PopUpWindow

Screenshot

Easy-to-use pop up window widget.

Supports dragging, closing, resizing, CSS styling, and loading content from AJAX.

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):

#HTML
<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:

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

To open it:

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

Screenshots

Screenshot Screenshot Screenshot

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
Something went wrong with that request. Please try again.