Modal
A simple two-part modal component, with a triggering link and a modal container. Features:
- Will scroll and resize (mobile safe)
- May contain any amount and type of content
- Close button inserted automatically
- Clicking on the blanket (overlay) closes the modal
- Multiple modals allowed on the same page
Options
data-modal-target
- (required) - ID of modal to trigger
Usage
Create a modal container and assign it a unique id
. This id
will be used to trigger the modal to open.
<div class="modal__dialog" id="unique-id">...</div>
Assign the id
to a link
by using data-modal-target
.
<a data-modal-target="unique-id" href="#">...</a>
Link Modal
Open modal
Lorem ipsum
You can put any content you want in here.
Button Modal
To make the link function like a button assign it the button
class.
Open modal
Lorem ipsum dolor sit amet consectetur adipisicing elit
![Alan Gilbert Building](/static/img/example/alan_gilbert.jpg)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nobis, quas inventore eveniet odit saepe porro reprehenderit ipsum doloremque harum quod officiis ipsa tempora delectus fugit impedit necessitatibus. Enim, vero?