Modals
Modal dialogs
A modal dialog is a type of window that appears in front of the content. A modal provides additional or critical information or can ask for a decision. Modals disable all other functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.
Dialogs are purposefully interruptive, so they should be used sparingly.
Standard Modal
In order for the modal to work you have to add the Modal ID to the link of the trigger. In the link button example below the href (in the middle of the Content pane) links to #modal-1.
To add a close button, just add the class .modal-close to your button (in the dialog).
Hi there, I am a modal.
If the content does not fit, you can scroll down to see more.
Contextual Modal
A modal can be made to open in the context of a parent container. To do this I placed the modal in a container with the class name .modal-context.
The proper context is then created through the .contextual-modal class on the modal itself.