This demo shows a overlay with the default settings. It will get visible direct after you click the "Show Overlay" button. When you click on the overlay it gets closed and automatically destroyed.
Simple Demo with background class
This is the same demo as above but the difference here is that we now use a predefined background class and no color. When you click on the show button then the CSS class ap-overlay-lines-dark is applied to the overlay so the browser paints a image as background.
This feature was added to allow to use images as background, not only colors. So you can define your own background class for the overlay and set it via the background option.
In this demo we start with a orange colored overlay which fades to black after two seconds. At the end of this transition the overlay gets highlighted three times and after this you can click on the overlay to close it – before it's not possible to do that. Furthermore you can see the event in the log under the show button.