Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small
<dialog class="ts-modal" open>
<div class="content">
<div class="ts-content">
<div class="ts-header">Modal Title</div>
</div>
<div class="ts-divider"></div>
<div class="ts-content">
On the construction site,
crackling sounds like a symphony of building.
</div>
</div>
</dialog>Structure
Main content is placed inside the content block. For a title and action bar, see the Compositions section below.
<dialog class="ts-modal" open>
<div class="content">
<!-- ... -->
</div>
</dialog>States
A modal with the [open] attribute will appear on the screen.
<dialog class="ts-modal" open>
<div class="content">
<div class="ts-content">
You are banned from the fishing competition
for being "too pro at baiting on the internet."
</div>
</div>
</dialog>Variations
A modal can vary in size.
| 280px | 380px | 580px | 780px | |
|---|---|---|---|---|
| Class | is-small | Default | is-large | is-big |
<dialog class="ts-modal is-small" open>
<div class="content">
<div class="ts-content is-center-aligned">
Small Modal
</div>
</div>
</dialog>
<dialog class="ts-modal" open>
<div class="content">
<div class="ts-content is-center-aligned">
Default Modal
</div>
</div>
</dialog>
<dialog class="ts-modal is-large" open>
<div class="content">
<div class="ts-content is-center-aligned">
Large Modal
</div>
</div>
</dialog>A modal can fill the entire screen; this is useful for mobile device with Responsive.
<dialog class="ts-modal is-fullscreen" open>
<div class="content">
<div class="ts-content">
<div class="ts-header">Build connections for community.</div>
</div>
<div class="ts-divider"></div>
<div class="ts-content">
Our primary goal is to build connections between people and provide a supportive environment for content creation. Everyone should have the freedom to create without restrictions.
</div>
<div class="ts-divider"></div>
<div class="ts-content is-tertiary">
<button class="ts-button">Close</button>
</div>
</div>
</dialog>Compositions
<dialog class="ts-modal" open>
<div class="content">
<div class="ts-content">
<div class="ts-grid">
<div class="column is-fluid">
<div class="ts-header">Supreme Agreement</div>
</div>
<div class="column">
<button class="ts-close is-large is-secondary"></button>
</div>
</div>
</div>
<div class="ts-divider"></div>
<div class="ts-content">
We hope this agreement will prevent future deviations from our original ideals. As the name suggests, all definitions in the supreme agreement are core conditions that our services must follow.
</div>
</div>
</dialog><dialog class="ts-modal" open>
<div class="content">
<div class="ts-content">
<div class="ts-header">Enter the Username</div>
</div>
<div class="ts-divider"></div>
<div class="ts-content">
<div class="ts-input">
<input type="text" value="Yami Odymel" />
</div>
</div>
<div class="ts-divider"></div>
<div class="ts-content is-tertiary">
<div class="ts-wrap is-end-aligned">
<button class="ts-button">Confirm</button>
<button class="ts-button is-outlined">Cancel</button>
</div>
</div>
</div>
</dialog>Create a warning modal with an icon Header.
<dialog class="ts-modal" open>
<div class="content">
<div class="ts-content is-center-aligned is-padded">
<div class="ts-header is-icon">
<span class="ts-icon is-bomb-icon"></span>
Rebooting System
</div>
<p>This procedure will take at least half an hour.</p>
</div>
<div class="ts-divider"></div>
<div class="ts-content is-tertiary">
<button class="ts-button is-fluid">OK</button>
</div>
</div>
</dialog>A Content block with overflow-y: auto allows the text to scroll when it exceeds the height of the block.
<dialog class="ts-modal" open>
<div class="content">
<div class="ts-content">
<div class="ts-header">Terms of Use</div>
</div>
<div class="ts-divider"></div>
<div class="ts-content" style="max-height: 170px; overflow-y: auto">
<p>The comprehensive planning to consider during the "design" phase, the self-expectations and "attitude" towards things, and the crucial "execution" methods. Regardless, the design should be aimed at the public and operated with their input; the attitude towards dreams should never waver; and while executing, one should not forget the original intention.</p>
</div>
<div class="ts-divider"></div>
<div class="ts-content">
<label class="ts-checkbox">
<input type="checkbox" checked />
I have read and agree to all of the above.
</label>
</div>
<div class="ts-divider"></div>
<div class="ts-content is-tertiary">
<button class="ts-button is-fluid">OK</button>
</div>
</div>
</dialog>JavaScript Features
Clicking a button with the [data-dialog] attribute opens or closes the modal with the corresponding [id].
<button class="ts-button" data-dialog="modal">
Open Modal ✨
</button>
<dialog class="ts-modal" id="modal">
<div class="content">
<div class="ts-content">
<div class="ts-header">Modal Title</div>
</div>
<div class="ts-divider"></div>
<div class="ts-content">
<p>Click the close button or the gray area to close the modal.</p>
</div>
<div class="ts-divider"></div>
<div class="ts-content is-tertiary is-end-aligned">
<button class="ts-button" data-dialog="modal">Close</button>
</div>
</div>
</dialog>Open the modal with the native .showModal() function. It has no effect if the modal already has the [open] attribute. When closed, it triggers the close or cancel event.
// Open the `#modal` modal.
document.querySelector("#modal").showModal();
// Close the `#modal` modal.
document.querySelector("#modal").close();Properties
| Description | Default Value | Target | |
|---|---|---|---|
| [data-dismissible] |
If the modal can be closed by pressing the |
true |
.ts-modal |
CSS Variables
| Description | Default Value | Target | |
|---|---|---|---|
| --width |
The width of the modal. |
380px |
.ts-modal |
