OverlayJS

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>