Overview
Modalizer is a modal layer manager for web applications. It exposes a simple API to open, close and customise modal dialogs, including stacking multiple layers and reading layer configuration directly from DOM data attributes.
Features
- Multiple stacked modal layers with push/pop navigation
- Customisable content, header, footer and close button
- Keyboard and accessibility support
- Simple API for showing, hiding and replacing layers
Installation
npm install jizy-modalizerExample
Layers open two ways: clicking a Modalizer link (no page reload), or via a URL fragment on landing.
Modalizer links
Any element with a data-mdzr-path attribute, whose value is the Hasher URL of the layer to open.
Components
Content component
Populates a layer from a DOM element on the page.
Link: /mdzr/content/one/
Fragment: /modalizer#!content=one
Json component
Loads layer content from a JSON file via fetch.
Link: /mdzr/json/page2/
Fragment: /modalizer#!json=page2
Html component
Loads layer content from an external HTML file via fetch.
Link: /mdzr/html/page3/
Fragment: /modalizer#!html=page3
Image gallery (zoom)
Elements with data-zoom open a full-screen picture-viewer layer:
