Modal component

Uses the styles from Pico to display a modal. The component comes with pretty animations and the functionality to "lock" scrolling when the modal is open.

This does however require interaction with the page outside the modal. You need to include the webcomponent that's in picomponent.js in the packages repository root.

Setup

There must be only one instance of the modal component. since there can never be multiple modals open at the same time.

For the animation the component needs it's own state. So it is implemented with the Elm architecture.

You need to:

1. add a ModalState field to your model
2. initialize it with Modal.init
3. add a variant to your Mgs type that takes a Modal.Msg as an argument
4. forward the Modal.Msg to Modal.update and update your ModalState accordingly
5. subscribe to Modal.subscription (and tell it which of your Msg to use to wrap the Modal.Msg)
6. use Modal.view to render your modal

Control visibility