EN FR
← jizy-modalizer

Modalizer example

Layered modals driven by data attributes and URL fragments.

Modalizer layers can be loaded in two ways:

- by clicking on a Modalizer link: quicker since it doesn't require a full page reload

- using a URL fragment: convenient if you want to show the layer when landing on the page

Modalizer links

Modalizer links are any HTML element with a data-mdzr-path attribute.

The value of the data-mdzr-path attribute is the Hasher URL of the layer to open.

Example: <a href="#" data-mdzr-path="/mdzr/content/one/">Open layer</a>

Configuration

Components can be configured using the following options:

  • data-mdzr-path: The path is mandatory
  • data-mdzr-title: The title of the layer
  • data-mdzr-size: The size of the layer (sm, md, lg, normal)
  • data-mdzr-theme: The theme of the layer (default, dark, light, etc.)
  • data-mdzr-noheader: If present, the layer will not have a header
  • data-mdzr-nofooter: If present, the layer will not have a footer
  • data-mdzr-normal: If present, the layer will have normal scrolling
  • data-mdzr-close-icon: If present, the layer will have a close icon
  • data-mdzr-content: The content of the layer (HTML string or selector)
  • data-mdzr: A single attribute containing the config as a JSON string

Components

Native components are pre-defined building blocks that can be used to create layers.

Content component

Display a layer populated by a DOM element within the page.

Hasher URL: /mdzr/content/one/
URL fragment: /#!content=one

The content is loaded from an element within the page (a <div> for example).
The DOM element is identified by the cId parameter in the URL that corresponds to the element's id attribute.

Json component

Display a layer after loading the content from a JSON file.

Hasher URL: /mdzr/json/page2/
URL fragment: /#!json=page2

Fetches the json file with the fetch method (ex: /path/to/json/files/page2.json).
/path/to/json/files/ needs to be defined in the json component config.

Html component

Display a layer after loading the content from an external HTML file.

Hasher URL: /mdzr/html/page3/
URL fragment: /#!html=page3

Fetches the html file with the fetch method (ex: /path/to/html/files/page3.html).
/path/to/html/files/ needs to be defined in the html component config.

Examples

An image gallery:

Avatar
Montagne