School of Gains · Presented by PaperGains

Modal

A native <dialog> with a blurred backdrop. Use it only for confirmations, never for marketing pop-ups that cover CTAs.

modal

View HTML

<button class="sog-btn sog-btn--secondary" data-open="dlg">Open modal</button>
<dialog class="sog-modal" id="dlg"><h3 class="sog-h3" style="font-size:22px">Leave the live session?</h3><p class="sog-muted">You can rejoin from the portal anytime.</p><form method="dialog" class="sog-modal__actions"><button class="sog-btn sog-btn--ghost">Stay</button><button class="sog-btn sog-btn--primary">Leave</button></form></dialog>
<dialog class="sog-modal" open style="position:static;margin:0"><h3 class="sog-h3" style="font-size:22px">Leave the live session?</h3><p class="sog-muted">You can rejoin from the portal anytime.</p><div class="sog-modal__actions"><button class="sog-btn sog-btn--ghost">Stay</button><button class="sog-btn sog-btn--primary">Leave</button></div></dialog>