https://github.com/nonsalant/lazy-modal
lazy-modal web component
https://github.com/nonsalant/lazy-modal
modal popover ui vanilla-javascript web-components
Last synced: 10 months ago
JSON representation
lazy-modal web component
- Host: GitHub
- URL: https://github.com/nonsalant/lazy-modal
- Owner: nonsalant
- Created: 2025-07-08T23:22:11.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-03T19:00:32.000Z (11 months ago)
- Last Synced: 2025-08-03T21:05:56.811Z (11 months ago)
- Topics: modal, popover, ui, vanilla-javascript, web-components
- Language: JavaScript
- Homepage: https://codepen.io/nonsalant/pen/MYwjvoo
- Size: 361 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# <lazy-modal> web component
A popover that starts loading related assets (and, optionally, the content inside) when you hover or focus its trigger button(s).
## Demo
[View a demo implementation on CodePen](https://codepen.io/nonsalant/pen/MYwjvoo)
[](https://codepen.io/nonsalant/pen/MYwjvoo)
*The demo shows two 3rd party web components ([storage-form](https://github.com/daviddarnes/storage-form) and [action-table](https://github.com/colinaut/action-table)) lazily loaded from CDNs when opened in popover modals*
## Attributes
| Attribute | Description |
|------------------|-------------|
| `triggers` | Required attribute: A CSS selector for the trigger button(s). |
| `inner-styles` | A comma-separated list of paths to stylesheets (relative to the lazy-modal.js file or absolute URLs). |
| `inner-scripts` | A comma-separated list of paths to scripts (relative to the lazy-modal.js file or absolute URLs). |
| `inner-content` | A path to an HTML file (relative to the lazy-modal.js file) that will be injected into the modal. |
| `popover` | This [native attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover) hides the modal before any JS is loaded. You can skip adding this to each modal (because it's added automatically if missing) and add this style somewhere in your CSS to avoid the initial flash of content:
`lazy-modal:not(:defined) { display: none; }` |
| `close-button` | If present adds an "x" button that closes the modal. You can skip this and add it manually (inside the modal element) with something like:
` Close ` |
| `load-on` | Possible values:
• `click` - the modal will load everything when a trigger is clicked.
• `hover` (default) - the modal will load everything when a trigger is hovered or focused.
• `visible` - the modal will load everything when a trigger becomes visible in the viewport.
• `load` - the modal will load everything immediately without looking for a trigger.|
| `in-head` | If present, the modal's styles and scripts will be added to the `` of the document instead of inside the modal element. |
## Importing the component from local files
Grab the lazy-modal folder from this repo and include the script:
```html
```
Alternatively, you can grab everything as a single JavaScript file from the [CodePen demo](https://codepen.io/nonsalant/pen/MYwjvoo) (all the code in the JS tab), where utility functions are included at the bottom, and the `#closeButton` and `#modalCss` private properties include all the code from the other asset files in the lazy-modal folder.
## Importing the component from a CDN
```html
```
## Usage
### Basic Usage (content inside the modal HTML)
The paths to for `inner-styles` and `inner-scripts` attributes can be paths relative to the **lazy-modal.js** file, or absolute URLs.
```html
Open the Popover
```
### Client-Side Rendering the Modal Content
The path for the `inner-content` attribute (pointing to an HTML file) needs to be relative to the **lazy-modal.js** file.
```html
Open the Popover
```
(See the examples/csr-demo.html file for a working example.)
### Server-Side Rendering the Modal Content (PHP Example)
The path to the included content (HTML or another PHP file) needs to be relative to the current PHP file.
```php
Open the Popover
```
(See the examples/ssr-demo.php file for a working example.)
### Client-Side Lazy Rendering the Modal Content
To lazy render the modal content, you can wrap it in a `` tag. The content (initially inert) will be cloned and appended to the modal the first time the modal trigger is hovered/focused/clicked or if the popover is shown in some other way.
This can be useful for heavyweight or stateful components that you don't want to instantiate eagerly.
```html
Open the Popover
```
(See the examples/lazy-render-demo.php file for a working example -- lazy rendering happens client-side, but the content inside the templates is included server-side to keep the example short and readable.)