Πώς να δημιουργήσετε ένα πλαίσιο ειδοποίησης JavaScript ή ένα αναδυόμενο παράθυρο

Τα αναδυόμενα κουτιά (ή παράθυρα διαλόγου) είναι παράθυρα που χρησιμοποιούνται για την ειδοποίηση ή προειδοποίηση του χρήστη ή για τη λήψη πληροφοριών από τον χρήστη.

Τα αναδυόμενα πλαίσια εμποδίζουν τον χρήστη να έχει πρόσβαση σε άλλες πτυχές ενός προγράμματος έως ότου κλείσει το αναδυόμενο παράθυρο, επομένως δεν πρέπει να χρησιμοποιείται υπερβολικά.

Υπάρχουν τρία διαφορετικά είδη αναδυόμενων μεθόδων που χρησιμοποιούνται στο JavaScript: window.alert (), window.confirm () και window.prompt ().

Συναγερμός

Η μέθοδος ειδοποίησης εμφανίζει μηνύματα που δεν απαιτούν από τον χρήστη να εισαγάγει μια απάντηση. Μόλις καλείται αυτή η λειτουργία, θα εμφανιστεί ένα παράθυρο διαλόγου ειδοποίησης με το καθορισμένο (προαιρετικό) μήνυμα. Οι χρήστες θα πρέπει να επιβεβαιώσουν το μήνυμα πριν εξαφανιστεί η ειδοποίηση.

Παράδειγμα:

window.alert("Welcome to our website");

Παράδειγμα ειδοποίησης MDN

Επιβεβαιώνω

Η μέθοδος επιβεβαίωσης είναι παρόμοια με window.alert(), αλλά εμφανίζει επίσης ένα κουμπί ακύρωσης στο αναδυόμενο παράθυρο. Τα κουμπιά επιστρέφουν δυαδικές τιμές: true για OK και false για Cancel.

Παράδειγμα:

var result = window.confirm('Are you sure?'); if (result === true) { window.alert('Okay, if you're sure.'); } else { window.alert('You seem uncertain.'); }
Παράδειγμα επιβεβαίωσης MDN

Προτροπή

Η γρήγορη μέθοδος χρησιμοποιείται συνήθως για τη λήψη κειμένου από τον χρήστη. Αυτή η συνάρτηση μπορεί να περιλαμβάνει δύο ορίσματα, και τα δύο από αυτά είναι προαιρετικά: ένα μήνυμα προς εμφάνιση στον χρήστη και μια προεπιλεγμένη τιμή για εμφάνιση στο πεδίο κειμένου.

Παράδειγμα:

var age = prompt('How old are you?', '100');

Παράδειγμα προτροπής MDN

Άλλες επιλογές σχεδίασης:

Εάν δεν είστε ικανοποιημένοι με τα προεπιλεγμένα αναδυόμενα παράθυρα JavaScript, μπορείτε να αντικαταστήσετε σε διάφορες βιβλιοθήκες διεπαφής χρήστη. Για παράδειγμα, το SweetAlert παρέχει μια ωραία αντικατάσταση για τυπικές λειτουργίες JavaScript. Μπορείτε να το συμπεριλάβετε στο HTML σας μέσω ενός CDN (δίκτυο παράδοσης περιεχομένου) και να ξεκινήσετε τη χρήση.

Η σύνταξη έχει ως εξής: swal(title, subtitle, messageType)

swal("Oops!", "Something went wrong on the page!", "error");

Ο παραπάνω κώδικας θα παράγει το ακόλουθο αναδυόμενο παράθυρο:

Παράδειγμα SweetAlert

Το SweetAlert δεν είναι καθόλου το μόνο υποκατάστατο των τυπικών modals, αλλά είναι καθαρό και εύκολο στην εφαρμογή.

Περισσότερες πληροφορίες:

  • MDN window.alert ()
  • MDN window.confirm ()
  • MDN window.prompt ()