NJ Web Design System (v2.5.0)

Modal: With Forced Action 

<div class="padding-1">
    <button class="usa-button" aria-controls="example-modal" data-open-modal>
        Open modal with forced action
    </button>
    <div class="usa-modal" id="example-modal" aria-labelledby="modal-heading" aria-describedby="modal-description" data-force-action>
        <div class="usa-modal__content">
            <div class="usa-modal__main">
                <h2 class="usa-modal__heading" id="modal-heading">
                    Your session will end soon.
                </h2>
                <div class="usa-prose">
                    <p id="modal-description">
                        You’ve been inactive for too long. Please choose to stay signed in
                        or sign out. Otherwise, you’ll be signed out automatically in 5
                        minutes.
                    </p>
                </div>
                <div class="usa-modal__footer">
                    <ul class="usa-button-group">
                        <li class="usa-button-group__item">
                            <button type="button" class="usa-button" data-close-modal>
                                Yes, stay signed in
                            </button>
                        </li>
                        <li class="usa-button-group__item">
                            <button type="button" class="usa-button usa-button--unstyled padding-105 text-center" data-close-modal>
                                Sign out
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

No notes defined.

<div class="padding-1">
  <button
    class="usa-button"
    aria-controls="example-modal"
    data-open-modal
  >
    Open modal with forced action
  </button>
  <div
    class="usa-modal"
    id="example-modal"
    aria-labelledby="modal-heading"
    aria-describedby="modal-description"
    data-force-action
  >
<div class="usa-modal__content">
      <div class="usa-modal__main">
        <h2 class="usa-modal__heading" id="modal-heading">
          Your session will end soon.
        </h2>
        <div class="usa-prose">
          <p id="modal-description">
            You’ve been inactive for too long. Please choose to stay signed in
            or sign out. Otherwise, you’ll be signed out automatically in 5
            minutes.
          </p>
        </div>
        <div class="usa-modal__footer">
          <ul class="usa-button-group">
            <li class="usa-button-group__item">
              <button type="button" class="usa-button" data-close-modal>
                Yes, stay signed in
              </button>
            </li>
            <li class="usa-button-group__item">
              <button
                type="button"
                class="usa-button usa-button--unstyled padding-105 text-center"
                data-close-modal
              >
                Sign out
              </button>
            </li>
          </ul>
        </div>
      </div>
  </div>
</div>
 
package:
  name: null
  version: 2.5.0
uswds:
  path: ../../dist