Floating Window
A draggable, resizable floating window/panel with a title bar, close/minimize/maximize controls, and viewport containment.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Whether the window is visible |
x | number | 80 | Initial horizontal position in px |
y | number | 80 | Initial vertical position in px |
width | number | 360 | Initial width in px |
height | number | 240 | Initial height in px |
title | string | — | Window title bar text |
modal | boolean | — | Dim the background behind the window |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/floating-window.js"></script>import "./pura/lib/floating-window.js";