Popup

Popup is a lightweight DOM factory. It only creates common popup nodes for other components to use.

UI Primitive RenderableContent

Import

TypeScript
import { createPopup } from 'vanilla-jui';

TypeScript
const popup = createPopup({  position: 'center',  component: 'modal',  content: 'Popup content',});document.body.appendChild(popup);

Generated structure:

HTML
<div  class="j-popup-layout is-center"  role="dialog"  data-modal="root"  aria-modal="true"  aria-labelledby="dialog-title">  ...</div>

createPopup(options)

TypeScript
createPopup(options:PopupOptions):HTMLElement {}

Option	Type	Default	Description
`className`	`string`	`'j-popup-layout'`	Base class name of the root node
`position`	`string`	`'center'`	Popup position, appended as `is-${position}`
`component`	`string`	`''`	Component name. When non-empty, renders `data-${component}` and matching ARIA
`labelledby`	`string`	`''`	When non-empty, renders `aria-labelledby`
`content`	`RenderableContent`	`''`	Popup content

position supports nine-point placement. Available values: