Como criar uma caixa de alerta personalizada em JavaScript

Em JavaScript, geralmente queremos criar páginas da web com caixas de alertas personalizadas para tornar uma página da web mais atraente. Além disso, algumas funcionalidades adicionais também podem ser adicionadas na caixa de alerta para fins de personalização. Nesses casos, a criação de uma caixa de alerta personalizada facilita sua vida de desenvolvimento e aprimora a aparência do site.

Este blog ilustrará os métodos para criar caixas de alerta personalizadas em JavaScript.

Como projetar uma caixa de alerta personalizada em javascript?

Para criar uma caixa de alerta personalizada em JavaScript, você pode utilizar:

• Biblioteca "Sweetalert"
• Biblioteca "JQuery"

Vamos agora passar por cada uma das duas abordagens uma por uma!

Método 1: Crie uma caixa de alerta personalizada em JavaScript usando a Biblioteca Sweetalert

Sweetalert é uma biblioteca JavaScript usada para personalizar alertas em aplicativos e sites da web com a ajuda de um botão. Você pode utilizar seu “Swal.fogo()”Método para criar uma caixa de alerta e personalizá -la usando CSS. Isso pode ser feito especificando o “Rede de entrega de conteúdo”(CDN) Link da biblioteca Sweetalert na“”Tag para acessar.

Exemplo

No exemplo abaixo, carregaremos o Arquivo "jQuery" e "CDN" Arquivo em nossas tags de script da seguinte forma:

Agora, aplicaremos o CSS no botão. Seu estilo inclui o “preenchimento”, Que definirá a área geral do botão para 15px e“alinhamento de texto”Alinhará o texto ao centro:

Então, crie um “botão”Caixa de alerta de ativação atabilizada que acionará a caixa de alerta e atribuirá“showalert”Como seu ID, que será acessado pela função JavaScript:

Por fim, acesse o ID do botão especificado e aplique o “clique()”Método. Como resultado, quando o botão é clicado, o “Swal.fogo()”O método retornará o texto correspondente em uma caixa de alerta:

A saída da implementação acima resultará da seguinte maneira:

Método 2: Crie caixa de alerta personalizada em javascript usando a biblioteca jQuery

JQuery é uma biblioteca JavaScript que torna o manuseio de eventos muito mais simples de implementar com uma API fácil de usar. Você pode utilizá -lo para obter o ID e a classe da caixa de alerta e aplicar métodos diferentes para eles para criar uma caixa de alerta personalizada.

O exemplo abaixo explica o conceito declarado.

Exemplo

Em primeiro lugar, carregaremos a biblioteca JavaScript “JQuery”Em nosso programa:

Agora, inicialize o “Div ID”, “Div Class” e “Classe de botão” No arquivo html:

Na etapa abaixo, incluiremos um botão chamado “Ativar caixa de alerta personalizada”. Ele funcionará de tal maneira que, quando o botão será clicado, o “ONCLICKEvento ”acionará o“showalert ()”Método:

Depois disso, definiremos a função Showalert () que aceita dois argumentos. Em seu corpo, acessaremos o DIV ID, buscará a mensagem da classe Div e a classe de botão. O "texto()”O método retornará o conteúdo de texto da mensagem e o“desbloquear ()”O método removerá os manipuladores de eventos da mensagem. Quando o botão é clicado, a caixa de alerta se esconde. Por fim, o “clique()”O método será aplicado para lidar com a mensagem na caixa de alerta:

Estilo a caixa de alerta personalizada para torná -la atraente:

Saída

Discutimos diferentes métodos criativos para criar uma caixa de alerta personalizada em JavaScript. Você pode aplicar qualquer um dos métodos de acordo com sua exigência.

Conclusão

Para criar uma caixa de alerta personalizada em JavaScript, você pode usar o “Biblioteca Sweetalert, que inclui um “CDN”Arquivo para ativar o“Swal.fogo()”Método e“JQuery”Biblioteca, que carregará a biblioteca jQuery no projeto, buscar vários atributos da caixa de alerta e aplicar diferentes funcionalidades na caixa de alerta. Este artigo explicou os métodos para criar caixas de alerta personalizadas usando JavaScript.