modal · Casa Hacker DS

overview

01

variantes

02

Tamanhos por largura: 480px (compact), 640px (default), 800px (wide), 1024px (full). Use o tamanho mínimo que comporta o conteúdo.

tamanhos

03

A largura máxima padrão é 640px. Pra customizar, sobrescreva max-width no .modal.

comportamentos

04

Click em [data-modal-open="id"] abre o modal id
Click em [data-modal-close] fecha
Click no backdrop (fora do modal) fecha
Esc fecha
Foco vai pro primeiro foco-able ao abrir
Tab cycla apenas dentro do modal (focus trap)
Foco volta pro elemento que abriu ao fechar
body com overflow:hidden enquanto aberto

modifiers · api

05

prop	tipo	default	descrição
.modal-backdrop	class	—	overlay escuro
.modal	class	—	container principal
.modal-header	class	—	título + close
.modal-body	class	—	conteúdo scrollable
.modal-footer	class	—	ações no rodapé
data-modal-open	attr	—	ID do modal a abrir
data-modal-close	attr	—	fecha o modal pai

quando usar

06

use

Confirmação de ação destrutiva
Formulário curto e focado
Conteúdo crítico que precisa de atenção

não use

Conteúdo longo — usa página inteira
Notificação não-bloqueante — usa toast
Modal dentro de modal — fluxo confuso

acessibilidade

07 · wcag aa

role="dialog" + aria-modal="true"
aria-labelledby aponta pro h3 do header
Focus trap implementado
Esc fecha sempre
Foco retorna ao elemento de origem
aria-label="fechar" no botão close

código

08 · html

<!-- trigger -->
<button class="btn btn--primary" data-modal-open="myModal">abrir</button>

<!-- modal -->
<div class="modal-backdrop" id="myModal">
  <div class="modal">
    <div class="modal-header">
      <h3>título</h3>
      <button class="modal-close" data-modal-close>×</button>
    </div>
    <div class="modal-body">conteúdo</div>
    <div class="modal-footer">
      <button class="btn btn--ghost" data-modal-close>cancelar</button>
      <button class="btn btn--primary">ok</button>
    </div>
  </div>
</div>