Οι διάλογοι και τα modals είναι αναπόσπαστα μέρη των περισσότερων εφαρμογών web. Αν και η κατασκευή τους με το χέρι δεν είναι μια περίπλοκη εργασία, είναι κάτι που γίνεται γρήγορα κουραστικό για κάθε προγραμματιστή ιστού. Η συνήθης εναλλακτική λύση για την κατασκευή τους με το χέρι είναι να χρησιμοποιήσετε ένα εξάρτημα κατασκευασμένο από κάποιον άλλο.

Ωστόσο, υπάρχουν μερικά προβλήματα με αυτήν την προσέγγιση. Υπάρχουν τόσες πολλές επιλογές, καθίσταται δύσκολο να γνωρίζουμε ποιο στοιχείο θα ήταν καλύτερο να χρησιμοποιήσετε και Η προσαρμογή της εμφάνισης τέτοιων στοιχείων μπορεί μερικές φορές να είναι εξίσου κουραστική με τη δημιουργία ενός διαλόγου με το χέρι. Ευτυχώς, υπάρχει μια άλλη εναλλακτική: το στοιχείο διαλόγου HTML.

Τι είναι το στοιχείο διαλόγου;

Το στοιχείο διαλόγου HTML είναι μια ενσωματωμένη ετικέτα HTML (όπως div ή span), που επιτρέπει στους προγραμματιστές να δημιουργούν προσαρμοσμένους διαλόγους και τρόπους διαμόρφωσης. Το στοιχείο διαλόγου κυκλοφορεί στο Chrome και την Opera από το 2014, αλλά μόλις πρόσφατα έγινε υποστήριξη από όλα τα μεγάλα προγράμματα περιήγησης.

instagram viewer

Γιατί να χρησιμοποιήσετε το στοιχείο διαλόγου;

Ο πρωταρχικός λόγος για να χρησιμοποιήσετε το στοιχείο διαλόγου είναι η ευκολία. Διευκολύνει τη δημιουργία διαλόγων που μπορούν είτε να εμφανίζονται ενσωματωμένα είτε να εμφανίζονται ως modals, με τίποτα περισσότερο από μια ετικέτα HTML και μερικές γραμμές JavaScript.

Το στοιχείο διαλόγου καταργεί την ανάγκη δημιουργίας και εντοπισμού σφαλμάτων ενός προσαρμοσμένου διαλόγου ή εισαγωγής στοιχείου κάποιου άλλου. Είναι επίσης πολύ εύκολο στο στυλ με CSS.

Υποστήριξη προγράμματος περιήγησης για το στοιχείο διαλόγου

Δυστυχώς, η υποστήριξη του προγράμματος περιήγησης για το στοιχείο διαλόγου θα μπορούσε να είναι καλύτερη. Υποστηρίζεται στις πιο πρόσφατες εκδόσεις όλων των μεγάλων προγραμμάτων περιήγησης από τον Μάρτιο του 2022, με ορισμένες προειδοποιήσεις.

Οποιοδήποτε πρόγραμμα περιήγησης Firefox παλαιότερο από το Firefox 98 θα το υποστηρίζει μόνο εάν είναι ενεργοποιημένο με μη αυτόματο τρόπο στις ρυθμίσεις του προγράμματος περιήγησης και οποιαδήποτε έκδοση Safari παλαιότερη από το Safari 15.4 δεν το υποστηρίζει καθόλου. Οι πλήρεις λεπτομέρειες υποστήριξης του προγράμματος περιήγησης είναι διαθέσιμες στο μπορώ να χρησιμοποιήσω.

Ευτυχώς, αυτό δεν σημαίνει ότι το στοιχείο διαλόγου δεν μπορεί να χρησιμοποιηθεί. Η ομάδα του Google Chrome διατηρεί ένα πολυγέμισμα στο οποίο μπορείτε να βρείτε Github για το στοιχείο διαλόγου που παρέχει υποστήριξη για αυτό ακόμη και σε προγράμματα περιήγησης όπου δεν υποστηρίζεται εγγενώς.

Στην τρέχουσα μορφή του, το στοιχείο διαλόγου μπορεί να έχει προβλήματα προσβασιμότητας, επομένως ίσως είναι πιο κατάλληλο να χρησιμοποιήσετε ένα προσαρμοσμένο στοιχείο διαλόγου όπως a11y-διάλογος σε εφαρμογές παραγωγής.

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

Για να δείξετε πώς να χρησιμοποιήσετε το στοιχείο διαλόγου, θα το χρησιμοποιήσετε για να δημιουργήσετε μια κοινή δυνατότητα ιστότοπου: έναν τρόπο επιβεβαίωσης για ένα κουμπί διαγραφής.

Το μόνο που απαιτείται για να ακολουθήσει είναι ένα ενιαίο αρχείο HTML.

1. Ρύθμιση του αρχείου HTML

Ξεκινήστε δημιουργώντας το εν λόγω αρχείο και ονομάζοντάς το index.html.

Στη συνέχεια, δημιουργήστε τη δομή του αρχείου HTML και παρέχετε κάποιες βασικές μετα-πληροφορίες σχετικά με τη σελίδα, ώστε να αποδίδεται σωστά σε όλες τις συσκευές.

Πληκτρολογήστε τον ακόλουθο κώδικα στο index.html:

<!DOCTYPE html>
<html lang="en">
<κεφάλι>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Συμβατό" περιεχόμενο="IE=ακμή">
<μετα όνομα="θέαση" περιεχόμενο="πλάτος=πλάτος συσκευής, αρχική κλίμακα=1,0">
<τίτλος>Επίδειξη διαλόγου</title>
</head>
<στυλ></style>


<σώμα></body>
<γραφή></script>
</html>

Αυτή είναι όλη η ρύθμιση που απαιτείται για αυτό το έργο.

2. Γράφοντας τη Σήμανση

Στη συνέχεια, γράψτε τη σήμανση για το κουμπί διαγραφής, καθώς και το στοιχείο διαλόγου.

Πληκτρολογήστε τον ακόλουθο κώδικα στην ετικέτα σώματος του index.html:

<div class="κουμπί-δοχείο">
<κουμπί>
Διαγράφω είδος
</button>
</div>
<διαλόγου>
<div>
 Είστε σίγουροι ότι θέλετε να διαγράφωΑυτό είδος?
</div>
<div>
<κλάση κουμπιού="Κλείσε">
 Ναί
</button>
<κλάση κουμπιού="Κλείσε">
 Οχι
</button>
</div>
</dialog>

Το παραπάνω HTML θα δημιουργήσει:

  • Ένα κουμπί διαγραφής.
  • Το στοιχείο διαλόγου.
  • Δύο κουμπιά μέσα στο παράθυρο διαλόγου.

Εάν το index.html είναι ανοιχτό στο πρόγραμμα περιήγησής σας, το μόνο στοιχείο που είναι ορατό στην οθόνη θα είναι το κουμπί διαγραφής. Αυτό δεν σημαίνει ότι υπάρχει κάτι λάθος, το στοιχείο διαλόγου απαιτεί απλώς λίγο JavaScript για να γίνει ορατό.

3. Προσθήκη JavaScript

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

Πληκτρολογήστε τα εξής στην ετικέτα σεναρίου του index.html:

συνθ τροπικός = έγγραφο.querySelector("διάλογος")
document.querySelector(".κουμπί-κουμπί δοχείου").addEventListener("Κάντε κλικ", () => {
τροπικός.showModal();
});
συνθ closeBtns = έγγραφο.getElementsByClassName("close");
για (btn of closeBtns) {
 btn.addEventListener("Κάντε κλικ", () => {
τροπικός.Κλείσε();
 })
}

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

Ίσως να είστε εξοικειωμένοι με προγράμματα ακρόασης συμβάντων σε JavaScript, τα οποία μπορείτε να χρησιμοποιήσετε μόνοι σας. Το πρόγραμμα ακρόασης συμβάντος που είναι συνδεδεμένο στο κουμπί διαγραφής καλεί τη μέθοδο showModal() για να εμφανίσει το παράθυρο διαλόγου όταν κάνετε κλικ στο κουμπί.

Κάθε κουμπί μέσα στο modal έχει συνδεδεμένο ένα πρόγραμμα ακρόασης συμβάντων που χρησιμοποιεί τη μέθοδο close() για να κρύβει το παράθυρο διαλόγου όταν γίνεται κλικ.

Ακόμα κι αν δεν υπάρχει JavaScript που να καλεί τη μέθοδο close() στον κώδικα, οι χρήστες μπορούν επίσης να κλείσουν το modal πατώντας το πλήκτρο escape στο πληκτρολόγιό τους.

Τώρα που αυτή η JavaScript είναι στη θέση της, εάν ένας χρήστης κάνει κλικ στο κουμπί διαγραφής, το modal θα ανοίξει και κάνοντας κλικ στο κουμπί ναι ή όχι θα κλείσει το modal.

Έτσι πρέπει να μοιάζει το ανοιχτό modal:

Ένα πράγμα που αξίζει να σημειωθεί είναι ότι το στοιχείο διαλόγου συνοδεύεται ήδη από κάποιο στυλ, παρόλο που δεν υπάρχει CSS στο index.html. Το modal είναι ήδη κεντραρισμένο, έχει περίγραμμα, το πλάτος περιορίζεται στο περιεχόμενο και έχει κάποιο προεπιλεγμένο padding.

Οι χρήστες δεν μπορούν να αλληλεπιδράσουν (κλικ, επιλέξτε) με οτιδήποτε στο παρασκήνιο ενώ το modal είναι ανοιχτό.

Το στοιχείο διαλόγου μπορεί επίσης να εμφανιστεί ως μέρος της ροής της σελίδας αντί ως τρόπο. Για να το δοκιμάσετε, αλλάξτε το πρώτο πρόγραμμα ακρόασης συμβάντων στο JavaScript ως εξής:

document.querySelector(".κουμπί-κουμπί δοχείου").addEventListener("Κάντε κλικ", () => { modal.show(); });

Το μόνο πράγμα που έχει αλλάξει σε αυτόν τον κώδικα είναι ότι ο κώδικας καλεί τη μέθοδο show() αντί για τη μέθοδο showModal(). Τώρα, όταν ένας χρήστης κάνει κλικ στο κουμπί διαγραφής στοιχείου, το modal θα πρέπει να ανοίγει ενσωματωμένα ως εξής:

4. Προσθήκη στυλ

Στη συνέχεια, προσαρμόστε την εμφάνιση του διαλόγου και το φόντο του γράφοντας CSS.

Το CSS θα μειώσει το περίγραμμα του διαλόγου, θα περιορίσει το μέγιστο πλάτος του και στη συνέχεια θα σκουρύνει το φόντο, καθώς και θα προσθέσει λίγο στυλ στα κουμπιά.

Το στυλ του ίδιου του διαλόγου είναι απλό, αλλά η κλάση ψευδο φόντου είναι απαραίτητη για να προσθέσετε στυλ που στοχεύει το φόντο του διαλόγου.

Επικολλήστε τον ακόλουθο κώδικα στην ετικέτα στυλ του index.html:

διάλογος:: φόντο {
 φόντο: μαύρο;
αδιαφάνεια: 0.5;
}
κουμπί {
 περίγραμμα-ακτίνα: 2px;
 Χρώμα φόντου: λευκό;
 περίγραμμα: 1px συμπαγές μαύρο.
 περιθώριο: 5 px;
 κουτί-σκιά: 1px 1px 2px γκρι.
}
διάλογος {
 μέγιστο πλάτος: 90vw;
 περίγραμμα: 1px συμπαγές μαύρο.
}

Όταν το παράθυρο διαλόγου είναι ανοιχτό, θα πρέπει τώρα να μοιάζει με αυτό:

Και έχετε δημιουργήσει έναν πλήρως λειτουργικό διάλογο.

Το στοιχείο διαλόγου είναι ένας εξαιρετικός τρόπος δημιουργίας τρόπων

Χρησιμοποιώντας το στοιχείο διαλόγου HTML που πρόσφατα απέκτησε υποστήριξη σε όλα τα μεγάλα προγράμματα περιήγησης, οι προγραμματιστές ιστού μπορούν πλέον να δημιουργήσουν πλήρως λειτουργικά, εύκολα προσαρμόσιμοι τρόποι και διάλογοι με μία ετικέτα HTML και μερικές γραμμές JavaScript και χωρίς να χρειάζεται να βασίζεστε σε τρίτο μέρος λύση.

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