@amnesty/modal

Generic modal for Amnesty International Swedish website

Usage

This module has two usecases:

1. Load an iframe from www.amnesty.se and display it fullscreen
2. Present html content in a modal window, perferably as an iframe

In your webpage script you can have the modal open the iframe for you by calling the static method open.

var Modal = require('@amnesty/modal')

var link = document.querySelector('.js-link')

link.addEventListener('click', function () {
  Modal.open(link.href)
})

The webpage that is loaded in the iframe should create a modal and mount the modal on the body element. A modal created with the root option will automatically mount on the body when rendered, otherwise it will appended to the body.

An optional callback can be supplied to the render method which will be called if the modal is closed by clicking outside main window.

var html = require('nanohtml')
var Modal = require('@amnesty/modal')

var modal = new Modal({root: true, static: true})

modal.render(html`
  <div>
    <h1>Hello world!</h1>
  </div>
`, onclose)

function onclose () {
  console.log('bye!')
}

API

The modal is built on nanocomponent and all methods of nanocomponent are supported.

modal = new Modal([opts])

Creates a new Modal instance. Takes an optional object with options.

• root Make the modal outer most element a body tag
• static Prevent initial background transition

Modal.open(href)

Preload an iframe and display it fullscreen.

modal.render([child, [onclose]])

Render modal element. Takes an optional child element and an callback for when the modal is closed by clicking outside the main window. Returns the modal element.

modal.close([onclose])

Close the modal. Takes an optinoal callback that is called once the modal is closed.

Example

There's an example in the /examples folder which illustrates the typical setup.

$ npm run example

Install

$ npm install --save @amnesty/modal