Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Modals are currently only available in Formation React. Read about the Modal component.

Modal

Crisis Line Modal

<div class="va-crisis-line" style="position:static">
  <div class="va-flex">
    <button data-show="#modal-crisisline" class="va-crisis-line-button va-overlay-trigger" onclick="showModal(this);">
      <span class="va-flex">
        <span class="vcl"></span>
        Get help from Veterans Crisis Line
      </span>
    </button>
  </div>
</div>
<div id="modal-crisisline" class="va-overlay va-modal va-modal-large" role="alertdialog">
  <div class="va-crisis-panel va-modal-inner">
    <h3>Get help from Veterans Crisis Line</h3>
    <button class="va-modal-close va-overlay-close" type="button" aria-label="Close this modal" onClick="showModal(this);">
      <i class="fas fa-times-circle va-overlay-close" aria-hidden="true"> </i>
    </button>
    <div class="va-overlay-body va-crisis-panel-body">
      <ul>
        <li><a href="tel:18002738255">Call <strong>1-800-273-8255 (Press 1)</strong></a></li>
        <li><a href="sms:838255">Text to <b>838255</b></a></li>
        <li><a href="https://www.veteranscrisisline.net/ChatTermsOfService.aspx?account=Veterans%20Chat">Chat <b>confidentially now</b></a></li>
      </ul>
      <p>If you are in crisis or having thoughts of suicide,
visit <a href="https://www.veteranscrisisline.net/">VeteransCrisisLine.net</a> for more resources.</p>
    </div>
  </div>
</div>

<script type="text/javascript">
  function showModal(elem) {
    var parentClasses = document.getElementById("modal-crisisline").classList;
    if(elem.classList.contains('va-overlay-close')) {
      parentClasses.add('va-overlay');
    } else if(parentClasses.contains('va-overlay')) {
      parentClasses.remove('va-overlay');
    }
  }
</script>