Tutorial 09 · Overlays

Modals, Toasts & Command

Accessible overlays: focus trap, Escape, backdrop, and Cmd+K palette.

12 minIntermediatelucUI 2 · v2.1.3

Objectives

Open modal via data-luc-toggle="modal".
Fire toast via data-luc-toast.
Wire Cmd+K palette.

Steps

Modal

modal.html

<button data-luc-toggle="modal" data-luc-target="#my-modal">Open</button>
<div id="my-modal" class="luc-modal-backdrop" style="display:none">
  <article class="luc-modal" role="dialog" aria-modal="true">…</article>
</div>

Toast

toast.html

<button data-luc-toast data-luc-toast-title="Hi" data-luc-toast-message="Hello" data-luc-toast-variant="info">Toast</button>
<script>lucUI.createToast("Title","Msg",3600,"gold")</script>

Command

← Previous Next →