Skip to content


Repository files navigation

npm version Gitter Chat



It represents an overlay module. This module is responsible to create an overlay without predefining any inner overlay template.

It should be used by other modules to display their content in an overlay.


The overlay component will be initialized without any markup reference. Next to that, it's only purpose is to open and close itself and display provided content.

How do you work with the overlay?

It is really simple by using the publish/subscribe pattern. The overlay listens to:

  • EVENTS.overlay.close.

That means you only need to trigger the event and provide the content as a parameter.


Let's display an image in our overlay component. As long as all requirements are fulfilled you can execute the following:

Veams.Vent.publish(, { content: '<img src="" />' });

That's it.


Here you will find an onclick event which is just inlined to open the overlay. It is an easy way to show you a working example.

But we suggest to use @veams/component-cta for triggering global events out of the markup.



Installation with Veams

veams install component overlay
veams -i c overlay

JavaScript Options

The module gives you the possibility to override default options:

Option Type Default Description
openClass String 'is-open' Define the open class to open the overlay.
closeBtn String '[data-js-item="overlay-close"]' Define the element for close button.
overlay String '[data-js-item="overlay"]' Define the element for overlay.
regionContent String '[data-js-item="overlay-content"]' Define the element for region content.