Register

Modals

Dialogs that keep the focus inside until they close (WAI-ARIA dialog)

A dialog

Escape or Cancel closes it; the focus returns to the button.

Show the code
<button type="button" class="btn" data-dialog="md-1">Open a dialog</button>

Sizes

Small for a question, large for a form.

Show the code
<button type="button" class="btn" data-dialog="md-sm">Small</button>
<button type="button" class="btn" data-dialog="md-lg">Large</button>

Confirm before deleting

An alert dialog: Cancel has the focus, so Enter is safe.

Show the code
<button type="button" class="btn btn-danger" data-dialog="md-del">
<i class="ti ti-trash">
</i>Delete this product</button>

With a form

Checks the form before it closes.

Show the code
<button type="button" class="btn btn-primary" data-dialog="md-form">
<i class="ti ti-plus">
</i>Add a category</button>