OverlayJS

OverlayJS is library agnostic overlay application. It's alternative of LightBox, Fancybox and jQuery UI Dialog

Demo

Themes:

Properties

Property Type Description
selector string Overlay ID
width number The width of the dialog, in pixels. Default: 320
height number The height of the overlay, in pixels. Default: 240
autoOpen boolean When autoOpen is true the overlay will open automatically when overlay is called. If false it will stay hidden until .open() is called on it. Default: false
modal boolean If set to true, the overlay will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal overlays create an overlay below the overlay but above other page elements. Default: false
header boolean Indicates whether to show title bar or not. Default: true
footer boolean Indicates whether to show button bar or not. Default: true
buttons object Specifies which buttons should be displayed on the overlay. The property key is the text of the button. The value is the callback function for when the button is clicked. The context of the callback is the overlay element; if you need access to the button, it is available as the target of the event object.

Constructor

Constructor Description
Overlay(options:Object) Create a new overlay with given options

Events

Event Arguments Description
onBeforeOpen function() This event is triggered when a overlay attempts to open. If the onBeforeOpen event handler (callback function) returns false, the open will be prevented. this refer to overlay instance.
onOpen function() This event is triggered when overlay is opened. this refer to overlay instance.
onBeforeClose function() This event is triggered when a overlay attempts to close. If the onBeforeClose event handler (callback function) returns false, the close will be prevented. this refer to overlay instance.
onClose function() This event is triggered when the overlay is closed. this refer to overlay instance.

Methods

Method Return value Description
close Reference to overlay instance Close overlay
getData Reference to overlay instance Get meta data from overlay's api
open Reference to overlay instance Open overlay
setData Reference to overlay instance Set meta data to overlay's api

Example

<div id="example_3" title="Example 3" style="display: none">Sample content</div>
<input type="button" id="button_3" value="Modal message" />

<script type="text/javascript">
var overlay_3 = new OverlayJS({
	selector: "example_3",
	modal: true,
	width: 320,
	height: 140,
	buttons: {
		"OK": function (button) {
			this.close();
		}
	}
});
document.getElementById("button_3").onclick = function () {
	overlay_3.open();
};
</script>