JavaScript-pop-ups

• Kan 14, 2024

JavaScript var designet til at tilføje interaktivitet til websider, så det er ikke overraskende, at det har flere funktioner, der gør det enkelt at samle information fra og vise dem til en bruger ved hjælp af pop-up-bokse. Inden vi ser på disse bokse, skal du huske, at selvom disse ofte er den enkleste måde at indsamle og vise information på, er de ikke nødvendigvis den mest attraktive eller brugervenlige. Pop-ups kræver blandt andet, at brugeren trykker på en knap for at lukke vinduet efter hver meddelelse eller input - dette kan blive gammelt. Ud fra et webdesignsynspunkt har du virkelig meget lidt kontrol over præsentationen af ​​information i pop-up-bokse. Når det er sagt, på det rigtige sted og brugt til moderering, kan pop-up-bokse være både enkle og effektive.

Der er tre typer pop op-bokse - advarsel, bekræft og promp. Den enkleste og mest almindeligt anvendte pop-up er alarm. Alert tager ét argument - en meddelelse til brugeren. Når der vises en alarmboks, kan brugeren ikke fortsætte, før de trykker på knappen "OK". Koden til en alarmboks er enkel:

alarm ("Dette er en alarm")



Bekræftelsesfeltet er kun lidt mere kompliceret. Ligesom alarm, bekræfter tager et argument - beskeden. Når der vises en bekræftelsesboks, får brugeren et valg af svar ved hjælp af knapperne "OK" eller "Annuller". I modsætning til alarmen har bekræftelse en returværdi - 0 betyder, at brugeren har trykket på "Annuller" og 1 betyder "OK". Koden til en bekræftelsesboks er identisk med en alarmboks bortset fra at du på en eller anden måde vil indsamle returværdien:

save_me = bekræft ("Dette er en bekræftet pop-up")



Selvom det er det mest komplicerede af pop-ups, er prompt stadig ganske enkel. Prompt tager to argumenter - en meddelelse til brugeren og en standardværdi (eller "" hvis du ikke vil have nogen standardværdi.) Når promptboksen dukker op, kan brugeren indtaste de ønskede oplysninger og trykke på "OK". Der er også en "Annuller" -knap. Returneringsværdien er brugerens svar. Hvis brugeren annullerer, er returværdien nul. Hvis de lader promptboksen være tom, vil returværdien være den tomme streng (""). Du vil sandsynligvis kontrollere for disse værdier og gøre noget specielt i stedet for at bruge nul eller den tomme streng som deres svar. Koden til en promptboks er:

response = prompt ("Dette er en prompt", "Svar her")



Du kan se en demonstration af disse pop-up-bokse her

---

Video Instruktioner: Build a Popup With JavaScript (Kan 2024).