Overlay

Inject a customizable overlay.

Functions

Util.overlay

Definition

Name
Util.overlay
Syntax
Node = Util.overlay( [JSON _options] );

Description

This function will inject html, with variable functionality.

Styling should be done on a project by project basis and as such, there comes no pre-defined styling with the injected overlays.

Parameters

_options
JSON Optional - additional settings.
Options
Title
Text in overlay header. default: "Overlay"
Drag
Enable or disable drag on header. default: true
Class
Add classes to overlay div.
Width
Set width. default: 400
Height
Set height. default: 400
content_scroll
Adds a "content_scroll" class to overlay to allow for custom scroll setting via CSS. (Effect must be implemented in css.)
default: false

Return values

Node

Examples

Creating an overlay

var button = u.qs(".button"); button.clicked = function() { u.overlay({"title":"Hello world!"}); } u.ce(button);

Dependencies

JavaScript
  • Number
  • document.removeChild
Manipulator
  • Util.appendElement
  • Util.applyStyles
  • Util.applyStyle
  • Util.Events.addWindowEvent
  • Util.Events.drag
  • Util.getComputedStyle

Files

Main file

  • u-overlay.js

Segment support files

  • none

Segment dependencies

desktop
u-events-browser.js + u-events-movements.js + u-dom.js
desktop_ie11
u-events-browser.js + u-events-movements.js + u-dom.js
desktop_ie10
u-events-browser.js + u-events-movements.js + u-dom.js + u-dom_ie.js
desktop_ie9
u-events-browser.js + u-events-movements.js + u-dom.js + u-dom_ie.js
desktop_light
Not supported
tablet
u-events-browser.js + u-events-movements.js + u-dom.js
tablet_light
Not supported
tv
Not tested
smartphone
u-events-browser.js + u-events-movements.js + u-dom.js
mobile
Not supported
mobile_light
Not supported