Hvordan lage tilpasset varslingsboks i JavaScript

I JavaScript ønsker vi ofte å lage websider som har tilpassede varslingsbokser for å gjøre en webside mer attraktiv. Dessuten kan noen ekstra funksjonaliteter også legges til i varslingsboksen for tilpasning. I slike tilfeller gjør det lettere å lage en tilpasset varslingsboks og forbedre utseendet til nettstedet.

Denne bloggen vil illustrere metodene for å lage tilpassede varslingsbokser i JavaScript.

Hvordan designe en tilpasset varslingsboks i JavaScript?

For å lage en tilpasset varslingsboks i JavaScript, kan du bruke:

• “Sweetalert” -bibliotek
• “JQuery” -bibliotek

Vi vil nå gå gjennom hver av de to tilnærmingene en etter en!

Metode 1: Opprett en tilpasset varslingsboks i JavaScript ved hjelp av Sweetalert Library

Sweetalert er et JavaScript -bibliotek som brukes til å tilpasse varsler i webapplikasjoner og nettsteder ved hjelp av en knapp. Du kan bruke dens “Sval.Brann()”Metode for å lage en varslingsboks og tilpasse den ved hjelp av CSS. Det kan gjøres ved å spesifisere “Innholdsleveringsnettverk”(CDN) lenke til Sweetalert -biblioteket i“”Tag for tilgang til den.

Eksempel

I eksemplet nedenfor vil vi laste inn “JQuery” -fil og “CDN” Fil i skriptkodene våre som følg:

Nå vil vi bruke CSS på knappen. Stylingen inkluderer "polstring”Som vil angi det samlede arealet på knappen til 15px, og“Tekstalign”Vil justere teksten til sentrum:

Deretter lage en "knapp”Navnet Aktiver tilpasset varslingsboks som vil utløse varslingsboksen og tilordne“showalert”Som ID som vil få tilgang til av JavaScript -funksjonen:

Til slutt får du tilgang til den spesifiserte knapp -ID -en og bruk "Klikk ()”Metode på den. Som et resultat, når knappen er klikket, "Sval.Brann()”Metoden vil returnere den tilsvarende teksten i en varslingsboks:

Utgangen fra implementeringen ovenfor vil resultere som følger:

Metode 2: Opprett tilpasset varslingsboks i JavaScript ved hjelp av JQuery Library

JQuery er et JavaScript-bibliotek som gjør hendelseshåndtering mye enklere å implementere med et brukervennlig API. Du kan bruke den til å få ID og klasse i varslingsboksen og bruke forskjellige metoder på dem for å lage en tilpasset varslingsboks.

Eksemplet nedenfor forklarer det uttalte konseptet.

Eksempel

For det første laster vi JavaScript -biblioteket "JQuery”I programmet vårt:

Nå, initialiser “Div id”, “Div Class” og “Button Class” I HTML -filen:

I trinnet nedenfor vil vi inkludere en knapp som heter “Aktiver tilpasset varslingsboks”. Den vil fungere på en slik måte at når knappen skal klikkes, "ved trykk”Arrangementet vil utløse“ShowAllert ()”Metode:

Etter det vil vi definere funksjonen ShowAllert () som godtar to argumenter. I kroppen vil vi få tilgang til Div ID, hente Div Class -meldingen og knappeklasse. “tekst()”Metode vil returnere tekstinnholdet i meldingen, og“unbind ()”Metoden vil fjerne hendelsesbehandlerne fra meldingen. Når knappen er klikket, vil varslingsboksen gjemme seg. Til slutt "Klikk ()”Metoden vil bli brukt for håndteringsmelding i varslingsboksen:

Style the Custom Alert Box for å gjøre den attraktiv:

Produksjon

Vi har diskutert forskjellige kreative metoder for å lage tilpasset varslingsboks i JavaScript. Du kan bruke noen av metodene i henhold til kravet ditt.

Konklusjon

For å opprette en tilpasset varslingsboks i JavaScript, kan du bruke "Sweetalert Library, som inkluderer en “CDN”-Filen for å aktivere“Sval.Brann()”Metode, og“JQuery”Bibliotek, som vil laste jquery -biblioteket i prosjektet, henter forskjellige attributter til varslingsboksen og bruker forskjellige funksjonaliteter på varslingsboksen. Denne artikkelen forklarte metodene for å lage tilpassede varslingsbokser ved hjelp av JavaScript.