Gerador de Modal CSS

O que o CSS gerado cobre

O código estiliza cinco classes:

• .modal-backdrop: camada fixa em tela cheia, fundo escuro semitransparente (rgba(17, 24, 39, .62)), grade centralizada e 24 px de espaço ao redor do painel.
• .modal-panel: cartão branco com largura min(100%, Npx), seu raio de cantos, sombra suave e cantos cortados.
• .modal-header: barra de destaque de 4 px na sua cor e, abaixo, a área do título com espaçamento de 20 px 24 px.
• .modal-body: a área de conteúdo, com espaçamento de 18 px 24 px.
• .modal-actions: uma linha de botões alinhada à direita, com um espaço de 10 px entre eles.

Estrutura HTML correspondente

O CSS espera este markup:

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>Confirmar</h2>
    </div>
    <div class="modal-body">
      <p>Tem certeza de que deseja continuar?</p>
    </div>
    <div class="modal-actions">
      <button>Cancelar</button>
      <button>Continuar</button>
    </div>
  </div>
</div>

Mantenha o painel dentro do fundo: o fundo é a camada fixa e o painel fica centralizado nele. Para abrir e fechar o modal, insira e remova o fundo a partir do código da sua aplicação ou alterne a exibição dele.

Adaptação a telas pequenas

A largura do painel é limitada com min(100%, Npx), então um ajuste de 520 px vira a largura total da janela em um celular estreito, menos os 24 px de espaço do fundo. A linha de ações continua alinhada à direita e conteúdos longos rolam junto com a página. Não são necessárias media queries para os casos comuns.

Observações e limites

O gerador produz apenas CSS. Ele não inclui JavaScript para abrir ou fechar o modal, prender o foco do teclado ou lidar com a tecla ESC. Adicione essa lógica na sua aplicação.

O cabeçalho mantém a barra de destaque de 4 px o tempo todo; se você não precisar dela, remova ou altere a cor da regra no código copiado.