Modals
Modal dialogs for content that needs the user's attention.
ss-c-modal is a full-screen container that centres
an ss-c-modal-content box with
ss-c-modal-header, -body and
-footer. Use a native <dialog>
(its ::backdrop dims the page), or a
div with data-ss="modal", which adds an
ss-c-modal-backdrop, traps focus, closes on Escape
and on a click outside the content, and returns focus.
Native dialog
showModal() makes the rest of the page inert and
closes on Escape; a <form method="dialog">
closes it without script.
HTML
<button type="button" class="ss-c-button" onclick="document.getElementById('modal-dialog').showModal()">
Open dialog
</button>
<dialog class="ss-c-modal" id="modal-dialog" aria-labelledby="modal-dialog-title">
<div class="ss-c-modal-content">
<header class="ss-c-modal-header">
<h2 class="ss-t-text-lg ss-u-m-0" id="modal-dialog-title">Rename layer</h2>
<form method="dialog">
<button class="ss-c-close" aria-label="Close"></button>
</form>
</header>
<div class="ss-c-modal-body">
<p>A native dialog: no script beyond <code>showModal()</code>.</p>
</div>
<form method="dialog" class="ss-c-modal-footer">
<button class="ss-c-button ss-c-button--outline" value="cancel">Cancel</button>
<button class="ss-c-button ss-c-button--primary" value="ok">Rename</button>
</form>
</div>
</dialog>Scripted modal
data-ss="modal" on the container and
data-ss-modal-trigger="#id" on the button; any
data-ss-modal-close element closes it.
HTML
<button type="button" class="ss-c-button" data-ss="modal-trigger" data-ss-modal-trigger="#modal-basic">
Open modal
</button>
<div class="ss-c-modal" id="modal-basic" data-ss="modal" role="dialog" aria-modal="true" aria-labelledby="modal-basic-title" hidden>
<div class="ss-c-modal-content" data-ss-modal-content>
<header class="ss-c-modal-header">
<h2 class="ss-t-text-lg ss-u-m-0" id="modal-basic-title">Modal title</h2>
<button type="button" class="ss-c-close" aria-label="Close" data-ss-modal-close></button>
</header>
<div class="ss-c-modal-body">
<p>Modal body text goes here.</p>
</div>
<footer class="ss-c-modal-footer">
<button type="button" class="ss-c-button ss-c-button--outline" data-ss-modal-close>Cancel</button>
<button type="button" class="ss-c-button ss-c-button--primary" data-ss-modal-close>Save</button>
</footer>
</div>
</div>Sizes
ss-c-modal-sm, -md, -lg,
-xl and -full on the container set the
content width.
HTML
<div class="ss-f-cluster">
<button type="button" class="ss-c-button" data-ss="modal-trigger" data-ss-modal-trigger="#modal-sm">Small</button>
<button type="button" class="ss-c-button" data-ss="modal-trigger" data-ss-modal-trigger="#modal-lg">Large</button>
<button type="button" class="ss-c-button" data-ss="modal-trigger" data-ss-modal-trigger="#modal-full">Full screen</button>
</div>
<div class="ss-c-modal ss-c-modal-sm" id="modal-sm" data-ss="modal" role="dialog" aria-modal="true" aria-labelledby="modal-sm-title" hidden>
<div class="ss-c-modal-content" data-ss-modal-content>
<header class="ss-c-modal-header">
<h2 class="ss-t-text-lg ss-u-m-0" id="modal-sm-title">Small modal</h2>
<button type="button" class="ss-c-close" aria-label="Close" data-ss-modal-close></button>
</header>
<div class="ss-c-modal-body">
<p><code>ss-c-modal-sm</code></p>
</div>
</div>
</div>
<div class="ss-c-modal ss-c-modal-lg" id="modal-lg" data-ss="modal" role="dialog" aria-modal="true" aria-labelledby="modal-lg-title" hidden>
<div class="ss-c-modal-content" data-ss-modal-content>
<header class="ss-c-modal-header">
<h2 class="ss-t-text-lg ss-u-m-0" id="modal-lg-title">Large modal</h2>
<button type="button" class="ss-c-close" aria-label="Close" data-ss-modal-close></button>
</header>
<div class="ss-c-modal-body">
<p><code>ss-c-modal-lg</code></p>
</div>
</div>
</div>
<div class="ss-c-modal ss-c-modal-full" id="modal-full" data-ss="modal" role="dialog" aria-modal="true" aria-labelledby="modal-full-title" hidden>
<div class="ss-c-modal-content" data-ss-modal-content>
<header class="ss-c-modal-header">
<h2 class="ss-t-text-lg ss-u-m-0" id="modal-full-title">Full screen modal</h2>
<button type="button" class="ss-c-close" aria-label="Close" data-ss-modal-close></button>
</header>
<div class="ss-c-modal-body">
<p><code>ss-c-modal-full</code></p>
</div>
</div>
</div>Confirmation
role="alertdialog" with a description, for
destructive actions. Focus starts on the safe choice.
HTML
<button type="button" class="ss-c-button ss-c-button--danger" data-ss="modal-trigger" data-ss-modal-trigger="#modal-confirm">
Delete project
</button>
<div class="ss-c-modal ss-c-modal-sm" id="modal-confirm" data-ss="modal" role="alertdialog" aria-modal="true" aria-labelledby="modal-confirm-title" aria-describedby="modal-confirm-desc" hidden>
<div class="ss-c-modal-content" data-ss-modal-content>
<div class="ss-c-modal-body">
<h2 class="ss-t-text-lg" id="modal-confirm-title">Delete this project?</h2>
<p id="modal-confirm-desc">Its 12 layers and their history are removed. This cannot be undone.</p>
</div>
<footer class="ss-c-modal-footer">
<button type="button" class="ss-c-button ss-c-button--outline" data-ss-modal-close>Cancel</button>
<button type="button" class="ss-c-button ss-c-button--danger" data-ss-modal-close>Delete</button>
</footer>
</div>
</div>Form in a modal
HTML
<button type="button" class="ss-c-button" data-ss="modal-trigger" data-ss-modal-trigger="#modal-form">
Invite a member
</button>
<div class="ss-c-modal" id="modal-form" data-ss="modal" role="dialog" aria-modal="true" aria-labelledby="modal-form-title" hidden>
<form class="ss-c-modal-content" data-ss-modal-content onsubmit="return false">
<header class="ss-c-modal-header">
<h2 class="ss-t-text-lg ss-u-m-0" id="modal-form-title">Invite a member</h2>
<button type="button" class="ss-c-close" aria-label="Close" data-ss-modal-close></button>
</header>
<div class="ss-c-modal-body ss-f-stack">
<div class="ss-c-form__field">
<label class="ss-c-form__label" for="modal-form-email">Email</label>
<input class="ss-c-input" type="email" id="modal-form-email" autocomplete="email" required>
</div>
<div class="ss-c-form__field">
<label class="ss-c-form__label" for="modal-form-role">Role</label>
<select class="ss-c-select" id="modal-form-role">
<option>Viewer</option>
<option>Editor</option>
<option>Owner</option>
</select>
</div>
</div>
<footer class="ss-c-modal-footer">
<button type="button" class="ss-c-button ss-c-button--outline" data-ss-modal-close>Cancel</button>
<button type="submit" class="ss-c-button ss-c-button--primary">Send invite</button>
</footer>
</form>
</div>Content box in place
The content box on its own, outside the fixed container, to show its parts.
HTML
<div class="ss-c-modal-content" role="group" aria-labelledby="modal-static-title">
<header class="ss-c-modal-header">
<h3 class="ss-t-text-lg ss-u-m-0" id="modal-static-title">Header</h3>
<button type="button" class="ss-c-close" aria-label="Close"></button>
</header>
<div class="ss-c-modal-body">
<p>Body</p>
</div>
<footer class="ss-c-modal-footer">
<button type="button" class="ss-c-button ss-c-button--outline">Cancel</button>
<button type="button" class="ss-c-button ss-c-button--primary">Confirm</button>
</footer>
</div>