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


  • data-modal-target - (required) - ID of modal to trigger


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>


Lorem ipsum dolor sit amet consectetur adipisicing elit.

Modal content

To make the link function like a button assign it the button class.

Nested components

You can nest components inside the modal.

Modal content