NOTA: Alguns dos exemplos interativos podem usar CSS e JavaScript que você ainda não aprendeu. Não se preocupe em tentar entender todo o código. O objetivo dos exemplos é mostrar prévias desses conceitos de design para que você entenda melhor como as coisas funcionam. Para ver as prévias, você precisará ativar o editor interativo. O que é um modal? É o tipo de pop-up que um site pode mostrar para você sobre o conteúdo deles. HTML has a dialog element that you can use to create modals. O conteúdo atrás de um modal geralmente fica esmaecido. Isso ajuda o usuário a focar visualmente na área com a qual você quer que ele interaja – neste caso, o modal. Sempre é uma boa ideia permitir que o usuário clique fora do modal para fechá-lo.

<link rel="stylesheet" href="styles.css">
<button id="open-modal">Open Modal</button>
<dialog>
  <h2>Subscribe to our Newsletter!</h2>
  <p>Get the latest updates and offers.</p>
  <button>Subscribe</button>
  <button>Close</button>
</dialog>

<script src="index.js"></script>

dialog {
  border: none;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

const dialog = document.querySelector('dialog');
const closeButton = dialog.querySelector('button:last-of-type');
const openModalButton = document.getElementById('open-modal');

closeButton.addEventListener('click', () => {
  dialog.close();
});

openModalButton.addEventListener('click', () => {
  dialog.showModal();
});

// Close the modal when clicking outside of it
dialog.addEventListener('click', (event) => {
  const rect = dialog.getBoundingClientRect();
  const isInDialog = (
    event.clientX >= rect.left &&
    event.clientX <= rect.right &&
    event.clientY >= rect.top &&
    event.clientY <= rect.bottom
  );
  if (!isInDialog) {
    dialog.close();
  }
});

Você frequentemente verá botões muito proeminentes em modais. Estes são chamados de CTAs, ou call-to-action. Você quer que eles sejam facilmente identificáveis já que o propósito de interromper o fluxo do usuário com um modal é incentivá-lo a realizar uma ação específica. Modais também devem ter um botão de fechar. Embora você realmente queira que o usuário clique nos seus CTAs, é importante dar a eles uma opção para sair do modal e retomar o que estavam fazendo anteriormente.

<link rel="stylesheet" href="styles.css">
<button id="open-modal">Open Modal</button>
<dialog>
  <h2>Subscribe to our Newsletter!</h2>
  <p>Get the latest updates and offers.</p>
  <button class="cta">Subscribe</button>
  <button class="close">Close</button>
</dialog>
<script src="index.js"></script>

.cta {
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

.close {
  background-color: transparent;
  color: #007BFF;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

const dialog = document.querySelector('dialog');
const closeButton = dialog.querySelector('.close');
const openModalButton = document.getElementById('open-modal');

closeButton.addEventListener('click', () => {
  dialog.close();
});

openModalButton.addEventListener('click', () => {
  dialog.showModal();
});

// Close the modal when clicking outside of it
dialog.addEventListener('click', (event) => {
  const rect = dialog.getBoundingClientRect();
  const isInDialog = (
    event.clientX >= rect.left &&
    event.clientX <= rect.right &&
    event.clientY >= rect.top &&
    event.clientY <= rect.bottom
  );
  if (!isInDialog) {
    dialog.close();
  }
});

Existem, é claro, preocupações de acessibilidade com modais, como gerenciar corretamente o foco nos elementos. No entanto, se você usar essas práticas gerais como seu ponto de partida, terá uma base sólida para construir.