Modals
Page overlay, usually triggered by a click event
WAI-ARIA Reference: A dialog is a window overlayed on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close. [ Source ]
Modals Sample(s):
Button Triggered Modal
<button class="m_modal-open btn btn-secondary" data-modal-open="unique-modal-id">Sign In</button>
<div class="m_modal" role="dialog" aria-label="Modal Label" data-modal="unique-modal-id" id="unique-modal-id" hidden aria-hidden="true">
<div class="m_modal-dialog">
<div class="m_modal-header">
<h2>Sign In</h2>
</div>
<div class="m_modal-content">
<form action="" class="validate" novalidate="true">
<div hidden="" role="alert">
<svg aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-warning"></use>
</svg>
<p class="">Please correct the problems below and continue.</p>
</div>
<div class="form-group">
<label for="interest">Username</label>
<input type="text" name="username" id="username" required="" aria-required="true" placeholder="" autocomplete="off">
</div>
<div class="form-group">
<label for="other-interest" class="">Password</label>
<input type="password" name="password" id="password" required="" aria-required="true" autocomplete="off">
</div>
<div class="">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
<button class="m_modal-close" data-modal-close="unique-modal-id" aria-label="close">
<svg aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-close"></use>
</svg>
</button>
</div>
</div>Text triggered Modal
An anchor tag inside a text link can also be used to fire a modal.