<div class="margin-y-3">
<a href="#example-modal-3" class="usa-button" aria-controls="example-modal-3" data-open-modal>Open modal with forced action</a>
<div class="usa-modal " id="example-modal-3" aria-labelledby="modal-3-heading" aria-describedby="modal-3-description" data-force-action>
<div class="usa-modal__content">
<div class="usa-modal__main">
<h2 class="usa-modal__heading" id="modal-3-heading">
Your session will end soon.
</h2>
<div class="usa-prose">
<p id="modal-3-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>
</div>
No notes defined.
{% set close_icon %}
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="{{ uswds.path }}/img/sprite.svg#{{ close_button.icon_type | default("close") }}"></use>
</svg>
{% endset %}
<div class="margin-y-3">
<a href="#{{ id }}" class="usa-button" aria-controls="{{ id }}" data-open-modal>{{ trigger.text }}</a>
<div class="usa-modal {{ modifier }}" id="{{ id }}" aria-labelledby="{{ header.id }}" aria-describedby="{{ describedby }}"{% if forced %} data-force-action{% endif -%}>
<div class="usa-modal__content">
<div class="usa-modal__main">
{% if header.text -%}
<h2 class="usa-modal__heading" id="{{ header.id }}">
{{ header.text }}
</h2>
{% endif -%}
{% if description.text -%}
<div class="usa-prose">
<p id="{{ description.id }}">{{ description.text }}</p>
</div>
{% endif -%}
{% if footer -%}
<div class="usa-modal__footer">
<ul class="usa-button-group">
{% for action in footer -%}
<li class="usa-button-group__item">
<button type="button" class="{{ action.class | default("usa-button") }}" data-close-modal>{{ action.text }}</button>
</li>
{% endfor -%}
</ul>
</div>
{%- endif %}
</div>
{% if not forced -%}
<button class="usa-button usa-modal__close" aria-label="{{ close_button.aria_label }}" data-close-modal>
{% if close_button.text -%}
{{ close_button.text }}
{% else -%}
{{ close_icon | safe }}
{% endif -%}
</button>
{% endif -%}
</div>
</div>
</div>
package:
name: null
version: 2.1.0
uswds:
path: ../../dist
id: example-modal-3
modifier: null
describedby: modal-3-description
trigger:
text: Open modal with forced action
header:
text: Your session will end soon.
id: modal-3-heading
description:
id: modal-3-description
text: >-
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.
footer:
- action: null
text: Yes, stay signed in
- action: null
class: usa-button usa-button--unstyled padding-105 text-center
text: Sign out
close_button:
aria_label: Close this window
text: null
icon_type: close
forced: true