Popup

What the popup component does

When a user clicks an element with data-anim-popup-link="popupName", the component finds the corresponding popup (by name) and opens it.

Adds data-anim-popup-open to the <body>.
Locks page scroll (can be disabled in component settings if your build supports it).
Moves focus into the popup and remembers the previously focused element.
Closes by: close button (data-anim-popup-close), overlay click, or ESC.

Files location

HTML/SCSS/JS files live in: src/components/layout/popup/

Include the popup markup

Add the popup HTML to your page using <include>. The component file already contains a base popup example.

Include popup component

<include src="@components/layout/popup/popup.html"></include>

In popup.html each modal root has the attribute data-anim-popup="popupName". That value is the popup name. You can create multiple popups — just give each one a unique name.

Open and close a popup

To open a popup, add data-anim-popup-link to any trigger element and set the popup name.

Open popup by link/button

<a href="#" data-anim-popup-link="popup">Open Popup</a>

To close, use an element with data-anim-popup-close inside the popup. Overlay click and ESC are supported by default.

Tip

Keep close buttons inside the popup content area so keyboard users can reach them easily.

Open popup via URL hash

The component can open a popup via hash in the URL. For example, this will open the popup named popup:

Hash open example

http://localhost:1111/#popup

YouTube video inside popup

You can open a YouTube video in a popup with autoplay. Add data-anim-popup-youtube to the popup trigger and pass the video ID.

Where to get the video ID?

For a link like https://www.youtube.com/shorts/PQdR1VxI6Y8, the ID is PQdR1VxI6Y8.

Open popup with YouTube autoplay


<a
	href="#"
	data-anim-popup-link="popup"
	data-anim-popup-youtube="PQdR1VxI6Y8"
>Watch video</a>

If your popup is opened by hash or programmatically (not by a click trigger), you can attach the video ID directly to the popup root:

Attach YouTube ID to popup root


<div
	data-anim-popup="popup"
	data-anim-popup-youtube="PQdR1VxI6Y8"
	aria-hidden="true"
	class="popup"
>
	...
</div>

By default, the video is injected into the element marked with data-anim-popup-content (replacing its content). If you need a different placement, create a dedicated element and mark it with data-anim-popup-youtube-place.

Methods and events

Methods

You can control popups programmatically via a global object: window.animPopup.

Open a popup by name

window.animPopup.open('popup');

Events

The popup system emits events on document so you can hook into lifecycle moments.

beforePopupOpen — before open
afterPopupOpen — after open
beforePopupClose — before close
afterPopupClose — after close

Listen to popup events


document.addEventListener("afterPopupOpen", function (e) {
	// Current popup element:
	const currentPopup = e.detail.popup;
});

Note

If your actual global name differs in your project, search in the popup component JS and use the exported/global instance name from there.

Download

Want popups that work well by default: focus, scroll lock, overlay click, ESC close, and optional YouTube autoplay? Download the template and build faster.

Download Animmaster Vite Template Save your time — start now

Component: Modal Window (Popup) Modals with focus trap, hash open, and YouTube support