Use modals to display content that is not substantial enough to warrant its own page or navigation item. For example, you might use a modal for a newsletter signup, as shown in the example below.
Modals are most often calls to action to fill out a form, etc. As such, a button should be used as the link to open a modal, as in the example above.
The data-open
attribute should be applied to the button link and the value of that attribute should match the id of the div to be opened.
<div>
<a data-open="example-modal" class="button full-width">
<div class="valign">
<div class="button-label valign-cell">View an example modal</div>
</div>
</a>
</div>
<div id="example-modal" class="reveal center" data-reveal>
<i class="far fa-envelope fa-5x electric-blue" aria-hidden="true"></i>
<p class="h2">Sign up for updates</p>
<p>Sign up for updates to stay informed and get involved with events.</p>
<button class="close-button bg-white" data-close aria-label="Close modal" type="button"><span aria-hidden="true">×</span></button>
</div>