Jak utworzyć niestandardowe pole alertu w JavaScript

W JavaScript często chcemy tworzyć strony internetowe z dostosowanymi skrzynkami alertowymi, aby strona internetowa była bardziej atrakcyjna. Ponadto w polu alertu można również dodać pewne dodatkowe funkcje w celu dostosowywania. W takich przypadkach utworzenie niestandardowej skrzynki alertów ułatwia życie i zwiększa wygląd strony internetowej.

Ten blog ilustruje metody tworzenia niestandardowych skrzynek alertów w JavaScript.

Jak zaprojektować niestandardowe pole alertu w JavaScript?

Aby utworzyć niestandardowe pole alertu w JavaScript, możesz użyć:

• Biblioteka „Sweetalert”
• Biblioteka „jQuery”

Przejdziemy teraz każde z dwóch podejść jeden po drugim!

Metoda 1: Utwórz niestandardowe pole alertu w JavaScript za pomocą biblioteki Sweetalert

Sweetalert to biblioteka JavaScript używana do dostosowywania alertów w aplikacjach internetowych i stronach internetowych za pomocą przycisku. Możesz użyć jego „SWAL.ogień()”Metoda utworzenia pole alertu i dostosowania go za pomocą CSS. Można to zrobić, określając „Sieć dostarczania treści”(CDN) link biblioteki Sweetalert w„„Tag do uzyskania dostępu do niego.

Przykład

W poniższym przykładzie załadujemy Plik „jQuery” i „CDN” Plik w naszych znacznikach skryptów w następujący sposób:

Teraz zastosujemy CSS na przycisk. Jego stylizacja obejmuje „wyściółka”, Który ustawi ogólny obszar przycisku na 15px i„tekst-align„Wyrównuje tekst do środka:

Następnie stwórz „przycisk”Nazwane pola Enable Custom Alert, które spowoduje uruchomienie pole alertu i przypisuje„Showalert”Jako jego identyfikator, do którego dostęp do funkcji JavaScript:

Na koniec uzyskaj dostęp do określonego identyfikatora przycisku i zastosuj „Kliknij()„Metoda na tym. W rezultacie, gdy przycisk zostanie kliknięty, „SWAL.ogień()„Metoda zwróci odpowiedni tekst w polu alertu:

Wyjście powyższej implementacji spowoduje następujący sposób:

Metoda 2: Utwórz niestandardowe pole alertu w JavaScript za pomocą biblioteki jQuery

JQuery to biblioteka JavaScript, która sprawia, że ​​obsługa zdarzeń jest znacznie prostsza do wdrożenia z łatwym w użyciu API. Możesz go wykorzystać, aby uzyskać identyfikator i klasę pola alertu i zastosować do nich różne metody tworzenia niestandardowego pudełka alertu.

Poniższy przykład wyjaśnia podaną koncepcję.

Przykład

Po pierwsze, załadujemy bibliotekę JavaScript „JQuery„W naszym programie:

Teraz zainicjuj „Div id”, „klasa div” i „klasa guzika” W pliku HTML:

W poniższym kroku dołączymy przycisk o nazwie „Włącz niestandardowe pole alertu". Będzie działać w taki sposób, że po kliknięciu przycisku „na kliknięcie„Wydarzenie wywoła„Showalert ()" metoda:

Następnie zdefiniujemy funkcję showalert (), która akceptuje dwa argumenty. W jego ciele będziemy uzyskiwać dostęp do Div Id, pobrać komunikat klasy DIV i klasę przycisków. „„tekst()„Metoda zwróci treść tekstu wiadomości i„rozwiązać()”Metoda usunie obsługi zdarzeń z wiadomości. Po kliknięciu przycisku, pole alertu się ukryje. Wreszcie „„Kliknij()„Metoda zostanie zastosowana do obsługi wiadomości na polu alertu:

Styl Niestandardowe pole alerty, aby było atrakcyjne:

Wyjście

Omówiliśmy różne kreatywne metody tworzenia niestandardowych pole alertów w JavaScript. Możesz zastosować dowolną metody zgodnie z wymogami.

Wniosek

Aby utworzyć niestandardowe pole alertu w JavaScript, możesz użyć „Biblioteka Sweetalert, która zawiera „CDN”Plik, aby włączyć„SWAL.ogień()”Metoda i„JQuery„Biblioteka, która załaduje bibliotekę jQuery w projekcie, pobrą różne atrybuty pola alertu i zastosuj różne funkcje na polu alertu. W tym artykule wyjaśniono metody tworzenia niestandardowych pola alertów za pomocą JavaScript.