Mensagem de alerta simples

O uso de mensagem de alerta é bem simples, porém, caso precise de recursos mais avançados é necessário o uso de javascript. Mais não se preocupe ao longo desta seção daremos exemplos. Veja o exemplo de uma mensagem de alerta simples abaixo:

<div class="alert">
  <p class="content">Esta é uma mensagem de alerta</p>
</div>
          

Para alterar a cor de fundo, basta adicionar o nome da cor como classe do elemento

<div class="alert blue">
  <p class="content">Esta é uma mensagem de alerta</p>
</div>
          

Mensagem de alerta com javascript

Com javascript, nós iremos criar um botão close para fechar o alerta criado. Porém, existe algumas formas de você adicionar tal código no seu projeto, que pode ser o inline ou arquivo externo e a outra forma é utilizar o atributo nativo onclick dos elementos.

Usando o onclick

<div class="alert red">
  <span class="alert-close" onclick="this.parentElement.style.display='none';">×</span>
  <p class="content">Esta é uma mensagem de alerta com botão de close</p>
</div>
          

Usando arquivo externo ou inline

<div class="alert green">
  <span class="alert-close">×</span>
  <p class="content">Esta é uma mensagem de alerta com botão de close</p>
</div>
          

let alert_message = document.getElementsByClassName('alert-close');
for (let i = 0; i < alert_message.length; i++) {
  alert_message[i].addEventListener('click', () => {
    alert_message[i].parentElement.style.display = 'none';
  });
}