1

Entre um if e else tenho uma chamada de um alert para retornar uma resposta para o usuário, entre tando o layout do alert em si não fica muito de acordo com o layout do site, gostaria de saber como posso personalizar isso.

if(ainput5 == false || ainput4 == false || ainput3 == false || ainput2 == false || ainput == false){
    alert('Para finalizar a compra é necessario informar a quantidade de salgados.');
    document.formMonteCaixa.creditCard5.focus();
  }
5
  • 6
    Possível duplicata de Customizar o alert
    – Largato
    Commented 11/06/2018 às 6:00
  • Visite o Sweet Alert. Tem bastantes usos e costumizações para os alerts. Commented 11/06/2018 às 10:09
  • Acredito que o melhor que você pode fazer é utilizar o sweetalert. É um componente pronto, entretanto extremamente agradável. Commented 11/06/2018 às 13:11
  • Irei dar uma olhada nesse Sweet Alert
    – RonaldoM
    Commented 12/06/2018 às 2:28
  • Testei aqui, acredito que seja a melhor opção mesmo facilitou muito mais meu trabalho, obrigado pela dica !
    – RonaldoM
    Commented 12/06/2018 às 2:44

2 Respostas 2

1

Breve resposta: Não

O alert do navegador é um simples alerta DOM, como descrito na W3C "mostrar um alerta ao usuário e esperar para que ele o feche"; via de regra: não há especificação, embora navegadores até possam deixar você personalizar como fazem com a scrool bar: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar mas isto estaria fora da especificação

Como personalizar (Alternativa simples)

Você precisa fazer seu próprio alert e imitar o comportamento do navegador por javascript.

exemplo:

JavaScript:

<script>
    function customAlert(message) {
        var div = document.createElement("div");
        div.classList.add("custom-alert");
        var close = document.createElement("a");
        close.textContent = "[x]";
        close.classList.add("close"); // para o seu css
        close.addEventListener("click", () => {
            document.body.removeChild(div);
        }, true);
        div.appendChild(close);
        div.appendChild(document.createTextNode(message));
        document.body.appendChild(div);
    }

    customAlert("ola");
</script>

CSS

.custom-alert {
    /* o css do seu alerta */
}

W3C dom alert: https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#dom-alert

3
  • Aceito sugestões para melhorar a resposta, este é uma questão bem comum entre desenvolvedores web Commented 11/06/2018 às 11:46
  • 1
    Uma duvida e para fechar esse alert? criaria algo para dar um display nele?
    – RonaldoM
    Commented 12/06/2018 às 2:27
  • para fechar o alert, você pode inserir uma tag "a" ou "button" (por exemplo) e adicionar um evento à ela, no clique você remove o elemento do body Commented 12/06/2018 às 14:24
0

Eu uso o sweetalert, muito simples e fácil de usar. Da uma olhada na documentação aqui.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .