@voyant/ampersand-modal-view

Modal view for Ampersand.js

Usage no npm install needed!

<script type="module">
  import voyantAmpersandModalView from 'https://cdn.skypack.dev/@voyant/ampersand-modal-view';
</script>

README

ampersand-modal-view

A modal popup view for Ampersand.js.

Install

npm install ampersand-modal-view

Example

var ModalView = require('ampersand-modal-view');
var MyCustomView = require('some-custom-view');

var modalContent = new MyCustomView(options);
var modal = new ModalView({
  title: 'Title of My Modal',
  description: 'a description, mostly for screenreaders',
  contentView: modalContent
});

modal.openIn('body');

API Reference

constructor/initialize new AmpersandModalView([opts])

Creates a new modal view.

opts

  • title, the title of the modal. Set in a h1. Used as the aria label.
  • description, sets a description for screenreaders. Used as the aria description
  • close, allows you to change the screenreader label for the close button.
  • contentView, any object following the Ampersand view conventions. The content of the modal.

open in modalView.openIn(container)

Opens the modal in container.

  • container, a string selector or a DOM node to show the modal inside. Most cases this will be body.

Accessibility

This modal takes great care to be accessible for people using a screenreader. The inspiration for the implementation comes from these two great articles.

License

MIT