JavaScript-pop-ups

• Mei 3, 2024

JavaScript is ontworpen om interactiviteit aan webpagina's toe te voegen, dus het is niet verwonderlijk dat het verschillende functies heeft om het eenvoudig te maken om informatie te verzamelen van en weer te geven aan een gebruiker met behulp van pop-up boxes. Voordat we naar deze vakken kijken, moet u er rekening mee houden dat, hoewel dit vaak de eenvoudigste manier is om informatie te verzamelen en weer te geven, ze niet noodzakelijkerwijs de meest aantrekkelijke of gebruikersvriendelijk zijn. Pop-ups vereisen onder andere dat de gebruiker op een knop drukt om het venster te sluiten na elk bericht of elke invoer - dit kan snel oud worden. Vanuit het oogpunt van webontwerp hebt u ook echt heel weinig controle over de presentatie van informatie in pop-upvensters. Dat gezegd hebbende, op de juiste plaats, en met mate gebruikt, kunnen pop-up boxes zowel eenvoudig als effectief zijn.

Er zijn drie soorten pop-upvakken - alert, confirm en prompt. De eenvoudigste en meest gebruikte pop-up is alert. Alert heeft één argument nodig - een bericht naar de gebruiker. Wanneer een waarschuwingsvenster verschijnt, kan de gebruiker niet doorgaan totdat hij op de knop "OK" drukt. De code voor een waarschuwingsvak is eenvoudig:

alert ("Dit is een alert")



Het bevestigingsvenster is slechts iets gecompliceerder. Net als alert, bevestig één argument - het bericht. Wanneer een bevestigingsvenster verschijnt, krijgt de gebruiker de keuze om te antwoorden met de knoppen "OK" of "Annuleren". In tegenstelling tot alert heeft bevestigen een retourwaarde - 0 betekent dat de gebruiker op "Annuleren" heeft gedrukt en 1 betekent "OK". De code voor een bevestigingsvak is identiek aan een waarschuwingsvak, behalve dat u de retourwaarde op de een of andere manier wilt verzamelen:

save_me = confirm ("Dit is een pop-up bevestigen")



Hoewel het de meest gecompliceerde van de pop-ups is, is prompt nog steeds vrij eenvoudig. Voor de prompt zijn twee argumenten nodig: een bericht naar de gebruiker en een standaardwaarde (of "" als u geen standaardwaarde wilt.) Wanneer het promptvenster verschijnt, kan de gebruiker de gevraagde informatie invoeren en op "OK" drukken. Er is ook een knop "Annuleren". De retourwaarde is het antwoord van de gebruiker. Als de gebruiker annuleert, is de retourwaarde nul. Als ze het promptvenster leeg laten, is de retourwaarde de lege tekenreeks (""). U wilt waarschijnlijk op deze waarden controleren en iets speciaals doen in plaats van gebruiken nul of de lege string als reactie. De code voor een promptvenster is:

response = prompt ("Dit is een prompt", "Reageren hier")



U kunt hier een demonstratie van deze pop-up boxes bekijken

---

Video-Instructies: Build a Popup With JavaScript (Mei 2024).