VA Pattern Library

Modal: Basic 

<!-- SASS: src/stylesheets/_components/modal.scss -->
<!-- JS: src/js/modal.js -->

<button data-modal-trigger data-attr="modalBasic" data-modal-type="basic">Open Basic Modal</button>

<!-- Begin Modal -->
<div id="modalBasic" class="vaux-modal" role="dialog" aria-hidden="true" tabindex="-1" aria-labelledby="basicModalTitle">
    <div class="vaux-modal-header">
        <button class="usa-nav-close vaux-modal-close">Close</button>
        <h3 id="basicModalTitle">Modal Title</h3>
    </div>
    <div class="vaux-modal-content">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem.</p>
        <a href="http://www.google.com" target="_blank">Link inside modal</a>
    </div>
    <div class="vaux-modal-footer">
        <button type="button">Agree</button>
        <button class="usa-button-outline" type="button">Disagree</button>
    </div>
</div>
<!-- End Modal -->

UX Guidelines

Veteran’s Affairs UX Guide - Modal

Code Guidance

  • Modals are triggered by elements assigned with the 
    data-modal-trigger
    attribute. Typically, these are 
    <button>
    , 
    <a>
    , or icons but could be any element in the DOM. Note: should an icon be used, 
    aria-label
    should be used on the icon element in order to provide screen readers with descriptive text as to the intention of the icon.
  • Modal triggers need to have a 
    data-modal-type
    assigned with a value of basic or complex. This determines the styling and behavior of the modal.
  • Modal triggers should have a 
    data-attr
    with a value set to match the ID of the modal to be opened by the trigger.