Overlay is a toggle plugin to show interactive content over the main page with custom content and positions.


You can customize the default styles of this component inside tailwind.config.js setting theme.extend.xtendui.overlay see css customization. Check xtendui/src/overlay.css.js for default styles.

Overlays are moved to body to prevent z-index problems. Style and query overlay's content accordingly.


Import the javascript file with import 'xtendui/src/overlay'.

Initialize automatically within markup with [data-xt-overlay="{ <options> }"].

Initialize manually within javascript with new Xt.Overlay(document.querySelector('.my-container'), {/* options */}).

Usage Self

Use this code to create a overlay in self mode.

Just use the class on if you want to automatically open, or use the api.

Usage Unique

Use this code to create a overlay in unique mode.

The unique mode is useful when you want to trigger targets outside the scope.

Only when you specify elements or targets with id the query is inside document not only inside object.

Usage Multiple

Use this code to create a overlay in multiple mode.


Check out overlay themes for advanced implementations.