Come creare una casella di avviso personalizzata in JavaScript

In JavaScript, spesso vogliamo creare pagine Web con caselle di avviso personalizzate per rendere una pagina web più attraente. Inoltre, alcune funzionalità aggiuntive possono anche essere aggiunte nella casella di allerta ai fini della personalizzazione. In tali casi, la creazione di una scatola di allerta personalizzata semplifica la vita dello sviluppo e migliora l'aspetto del sito Web.

Questo blog illustrerà i metodi per la creazione di caselle di avviso personalizzate in JavaScript.

Come progettare una casella di avviso personalizzata in JavaScript?

Per la creazione di una casella di allerta personalizzata in JavaScript, puoi utilizzare:

• Biblioteca "Sweelelert"
• Biblioteca "jQuery"

Ora passeremo attraverso ciascuno dei due approcci uno per uno!

Metodo 1: creare una casella di avviso personalizzata in JavaScript usando la libreria Sweelert

SweeleTert è una libreria JavaScript utilizzata per personalizzare gli avvisi in applicazioni Web e siti Web con l'aiuto di un pulsante. Puoi utilizzare il suo "Swal.fuoco()"Metodo per creare una casella di avviso e personalizzarla usando CSS. Può essere fatto specificando il "Rete di consegna dei contenuti"(CDN) Link della libreria Sweelert in""Tag per accedervi.

Esempio

Nell'esempio seguente, caricheremo il File "jQuery" e "CDN" File nei nostri tag di script come segue:

Ora applicheremo CSS sul pulsante. Il suo stile include il "imbottitura"Che imposterà l'area generale del pulsante su 15px e"allineamento"Allinea il testo al centro:

Quindi, crea un "pulsante"Chiamata Abilita Cancella di avviso personalizzata che attiverà la casella di avviso e assegnerà"Showalert"Come ID a cui si accede dalla funzione JavaScript:

Infine, accedi all'ID pulsante specificato e applica il "clic()"Metodo su di esso. Di conseguenza, quando si fa clic sul pulsante, il "Swal.fuoco()"Il metodo restituirà il testo corrispondente in una casella di avviso:

L'output dell'implementazione di cui sopra risulterà come segue:

Metodo 2: crea una casella di avviso personalizzata in JavaScript utilizzando la libreria jQuery

JQuery è una libreria JavaScript che rende gli eventi molto più semplici da implementare con un'API di facile utilizzo. È possibile utilizzarlo per ottenere l'ID e la classe della scatola di allerta e applicare loro diversi metodi per la creazione di una scatola di allerta personalizzata.

L'esempio seguente spiega il concetto dichiarato.

Esempio

In primo luogo, caricheremo la libreria JavaScript "JQuery"Nel nostro programma:

Ora, inizializza il "Div ID", "Classe Div" e "Classe Button" Nel file HTML:

Nel passaggio seguente, includeremo un pulsante chiamato "Abilita la scatola di allerta personalizzata". Funzionerà in modo tale che quando il pulsante verrà cliccato, il "al clic"L'evento attiverà il"ShowAlert ()" metodo:

Successivamente, definiremo la funzione showalert () che accetta due argomenti. Nel suo corpo accederemo all'ID DIV, prendiamo il messaggio di classe Div e la classe dei pulsanti. IL "testo()"Il metodo restituirà il contenuto di testo del messaggio e"INCLID ()"Il metodo rimuoverà i gestori di eventi dal messaggio. Quando si fa clic sul pulsante, la casella di avviso si nasconderà. Infine, il "clic()"Il metodo verrà applicato per la gestione del messaggio nella casella di avviso:

Stile la scatola di allerta personalizzata per renderlo attraente:

Produzione

Abbiamo discusso di diversi metodi creativi per creare una casella di allerta personalizzata in JavaScript. Puoi applicare uno qualsiasi dei metodi in base alle tue esigenze.

Conclusione

Per creare una casella di avviso personalizzata in JavaScript, è possibile utilizzare "Biblioteca Sweelelert, che include una "CDN"File per abilitare il"Swal.fuoco()Metodo "e"JQuery"Libreria, che caricherà la libreria jQuery nel progetto, prenderà vari attributi della casella di allerta e applicherà diverse funzionalità nella casella di avviso. Questo articolo ha spiegato i metodi per la creazione di caselle di avviso personalizzate utilizzando JavaScript.