VA Pattern Library

Modal: Complex 

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

<h6>Complex Modal</h6>
<button data-modal-trigger data-attr="modalComplex" data-modal-type="complex">Open Modal</button>

<h6>Complex Modal w/ Button Group</h6>
<button data-modal-trigger data-attr="modalComplexWithButtons" data-modal-type="complex">Open Modal</button>

<!-- Begin Modal -->
<div id="modalComplex" class="vaux-modal" role="dialog" aria-hidden="true" tabindex="-1" aria-labelledby="complexModalTitle">
    <div class="vaux-modal-header">
        <button class="vaux-modal-close">Close</button>
        <h3 id="complexModalTitleTwo">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 aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem dolorem doloremque quidem quibusdam cupiditate, reiciendis tenetur cumque qui. Quas, at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat earum numquam reiciendis
            placeat quos, perferendis optio eos. Possimus accusantium officia quis nulla vero, distinctio, numquam deserunt, odit suscipit animi vel a esse soluta delectus! Accusantium? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, dolores
            est fugiat quas reiciendis, veritatis sunt facere officiis temporibus ipsa non ducimus veniam, numquam eum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tempore dolorem blanditiis vel repellendus ut non perspiciatis
            eum ea officia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam architecto, asperiores sapiente dicta repellendus nobis, quidem officiis molestias non et!</p>
    </div>
</div>
<!-- End Modal -->

<!-- Begin Modal w/ Button Group -->
<div id="modalComplexWithButtons" class="vaux-modal" role="dialog" aria-hidden="true" tabindex="-1" aria-labelledby="complexModalTitleTwo">
    <div class="vaux-modal-header">
        <button class="vaux-modal-close">Close</button>
        <h3 id="complexModalTitleTwo">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 aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem dolorem doloremque quidem quibusdam cupiditate, reiciendis tenetur cumque qui. Quas, at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat earum numquam reiciendis
            placeat quos, perferendis optio eos. Possimus accusantium officia quis nulla vero, distinctio, numquam deserunt, odit suscipit animi vel a esse soluta delectus! Accusantium? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, dolores
            est fugiat quas reiciendis, veritatis sunt facere officiis temporibus ipsa non ducimus veniam, numquam eum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tempore dolorem blanditiis vel repellendus ut non perspiciatis
            eum ea officia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam architecto, asperiores sapiente dicta repellendus nobis, quidem officiis molestias non et!</p>
    </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.