abidibo.net

moopopup

This is a mootools plugin which allows to display html content in a draggable, resizable popup window (really a layer over the document). The content shown may be passed as an option, taken from an existing html node or through an ajax request.

Requirements

It requires

  • mootools core >= 1.4.4
  • mootools more Drag, Drag.Move  (makeDraggable and makeResizable methods)

Features

The plugin creates a layer window showing a content passed by one of these three methods:

  • as a class option
  • existing text node
  • ajax request

Some options available (valid for the last plugin version):

  • id: the css identifier of the window
  • title: the window title
  • width: the window width
  • height: the window height
  • top_left_x, top_left_y: the top left corner coordinates, respect to the body
  • min_width: the minimum window width allowed when resizing
  • min_height: the minimum window height allowed when resizing
  • max_body_height: the maximum height allowed for the window content
  • draggable: whether to make the window draggable or not
  • resizable: whether to make the window resizable or not
  • overlay: whether to display the window over an opaque overlay (lightbox style)
  • url: the url called by ajax request
  • text: the window content passed as string
  • html_node: the element or id of the html node from which get the content
  • disable_objects: whether to disable active objects in the document before displaying the window or not
  • onComplete:  function called when the window is fully displayed
  • onClose: function called when the window is closed

There is no limit to the number of instances (windows) that the user may open at once. The windows' focus is automatically managed, that is when clicking over a window it will be brought in front.
If the top left corner coordinates are not specified then the window is centred respect to the user viewport.

moopopup has been tested with:

  • windows:
    - google chrome 12
    - firefox 5.0
    - internet explorer 9.0, 8.0, 7.0
  • linux:
    - chromium
    - firefox >= 3.6
  • mac:
    - firefox >= 4 
    - safari

If you find errors, bugs or simply have some annotations or advises, please comment here or submit them to the project page hosted on github.

mootools forge documentation demo download