Τα αναδυόμενα παράθυρα είναι πανταχού παρόντα στο διαδίκτυο, αλλά δεν είναι όλα κακά. Μάθετε πώς να δημιουργείτε ένα αναδυόμενο παράθυρο με καλή συμπεριφορά με τυπικές τεχνολογίες ιστού.
Τα καλά σχεδιασμένα αναδυόμενα παράθυρα κάνουν τον ιστότοπό σας πιο διαδραστικό και σύγχρονο. Μπορούν να δημιουργήσουν αγορές και να ενισχύσουν τις πωλήσεις για τις επιχειρήσεις.
Μπορείτε να δημιουργήσετε αναδυόμενα παράθυρα με HTML, CSS και JavaScript. Χρησιμοποιήστε τον παρακάτω οδηγό για να δημιουργήσετε και να διαμορφώσετε ένα αναδυόμενο παράθυρο από την αρχή. Κάνει τον ιστότοπό σας διαδραστικό και δημιουργεί εξαιρετικές εμπειρίες χρήστη.
Γράψτε HTML για να Δομήσετε το Περιεχόμενο
Ας γράψουμε έναν κώδικα HTML που έχει ένα κρυφό παράθυρο που εμφανίζεται όταν κάνετε κλικ σε ένα κουμπί. Σε αυτήν την περίπτωση, θα εμφανίσετε τη σημασία της λέξης Γειά σου! Το αναδυόμενο παράθυρο θα έχει μια επικεφαλίδα και κάποιο περιεχόμενο.
Αμέσως ενεργοποιείτε το modal παράθυρο, εμφανίζεται ένα θολό εφέ στο φόντο. Προσθέστε κλάσεις στις ενότητες που θα χρησιμοποιήσετε για να επιλέξετε το modal αργότερα στο JavaScript.
<σώμα>
<κουμπίτάξη="ανοιχτός τρόπος">Γειά σου!κουμπί><divτάξη="modal-content hidden-modal">
<divτάξη="modal-header">
<h3>Έννοια του Γεια!h3>
<κουμπίτάξη="κλειστός τρόπος">×κουμπί>
div><divτάξη="τροπικό σώμα">
<Π>Το Hello είναι ένας χαιρετισμός στην αγγλική γλώσσα. Χρησιμοποιείται σε
η έναρξη μιας πρότασης ως εισαγωγή είτε αυτοπροσώπως είτε
στο τηλέφωνο.Π>
div>
div>
<divτάξη="blur-bg hidden-blur">div>
<γραφήsrc="script.js">γραφή>
σώμα>
Η σελίδα θα πρέπει να εμφανίζεται ως εξής:
Μπορείτε επίσης να θέλετε να διερευνήσετε το Στοιχείο διαλόγου HTML αν θέλετε να χρησιμοποιήσετε την πιο σημασιολογική σήμανση.
Γράψτε CSS για να προσθέσετε στυλ
Χρησιμοποιήστε CSS για να μορφοποιήσετε το αναδυόμενο παράθυρο. Τοποθετήστε το παράθυρο στο κέντρο της ιστοσελίδας σε μαύρο φόντο, ώστε να είναι καθαρά ορατό. Θα κάνετε επίσης στυλ στο παράθυρο, το φόντο του και το μέγεθος γραμματοσειράς.
Αρχικά, δημιουργήστε ένα ομοιόμορφο στυλ για ολόκληρη τη σελίδα ορίζοντας το περιθώριο, το padding και το ύψος γραμμής. Στη συνέχεια, ευθυγραμμίστε τα στοιχεία του σώματος στο κέντρο σε φόντο πίσω.
* {
περιθώριο: 0;
υλικό παραγεμίσματος: 0;
μέγεθος κουτιού: περίγραμμα-κουτί;
ύψος γραμμής: 1;
}
σώμα {
ύψος: 100%;
απεικόνιση: καλώδιο;
δικαιολογώ-περιεχόμενο: κέντρο;
flex-direction: στήλη;
στοίχιση-στοιχεία: κέντρο;
Ιστορικό: #000;
χάσμα: 30px;
}
Στη συνέχεια, στυλ το ανοιχτό-τροπικό κουμπί. Δώστε του ένα διαφορετικό χρώμα φόντου από την υπόλοιπη σελίδα για να ξεχωρίζει. Επίσης, ορίστε το χρώμα της γραμματοσειράς, το μέγεθος, το padding και το χρόνο μετάβασης.
.ανοιχτό-τροπικό {
Ιστορικό: #20c997;
χρώμα: #fff;
σύνορο: κανένας;
υλικό παραγεμίσματος: 20px 40px;
μέγεθος γραμματοσειράς: 48px;
σύνορα-ακτίνα: 100px;
δρομέας: δείκτης;
μετάβαση: όλα 0.3s;
περίγραμμα: κανένας;
}
.ανοιχτό-τροπικό:ενεργός {
μεταμορφώνω: μεταφράστεΥ(-17 εικονοστοιχεία);
}
Στη συνέχεια, διαμορφώστε το στυλ του περιεχομένου που θα εμφανίζεται όταν ανοίξει το παράθυρο. Ορίστε ένα λευκό φόντο, δώστε του μικρότερο πλάτος από το σώμα και προσθέστε padding.
Δώστε του επίσης έναν δείκτη z, ώστε να εμφανίζεται μπροστά από το ανοιχτό-τροπικό κουμπί. Επιπλέον, ρυθμίστε το κρυφός-τροπικός εμφανίζεται ως κανένα, επομένως παραμένει κρυφό μέχρι να το ενεργοποιήσετε.
.τροπικό-περιεχόμενο {
Ιστορικό: #cccc;
πλάτος: 500px;
υλικό παραγεμίσματος: 20px;
σύνορα-ακτίνα: 10px;
z-δείκτης: 99;
}.modal-header {
απεικόνιση: καλώδιο;
δικαιολογώ-περιεχόμενο: διάστημα-μεταξύ;
περιθώριο-κάτω: 16px;
χρώμα: #000;
μέγεθος γραμματοσειράς: 30px;
}.τροπικό-σώμαΠ {
μέγεθος γραμματοσειράς: 22px;
ύψος γραμμής: 1.5;
}
.κρυφό-τροπικό {
απεικόνιση: κανένας;
}
Στη συνέχεια στυλ το στενός-τροπικός κουμπί με διαφανές φόντο και ευθυγραμμίστε το στο κέντρο.
.κλειστό-τροπικό {
Ιστορικό: διαφανής;
σύνορο: κανένας;
απεικόνιση: καλώδιο;
στοίχιση-στοιχεία: κέντρο;
δικαιολογώ-περιεχόμενο: κέντρο;
ύψος: 20px;
πλάτος: 20px;
μέγεθος γραμματοσειράς: 40px;
}
.κλειστό-τροπικό:φτερουγίζω {
χρώμα: #fa5252;
}
Τέλος, δώστε στυλ στο στοιχείο θολώματος που θα εμφανιστεί στο φόντο όταν ανοίξει το παράθυρο. Θα έχει μέγιστο ύψος και πλάτος και φίλτρο φόντου. Ορίστε το θάμπωμα ως κανένα, ώστε να μην είναι ορατό μέχρι να ανοίξει το παράθυρο.
.θόλωμα-βγ {
θέση: απόλυτος;
μπλουζα: 0;
αριστερά: 0;
ύψος: 100%;
πλάτος: 100%;
Ιστορικό: rgba(0, 0, 0, 0.3);
φόντο-φίλτρο: θολούρα(5px);
}.κρυφό-θόλωμα {
απεικόνιση: κανένας;
}
Μετά την προσθήκη στο CSS, η σελίδα θα πρέπει να μοιάζει με αυτό:
Ελέγξτε το αναδυόμενο παράθυρο με κώδικα JavaScript
Θα χρησιμοποιήσετε JavaScript για να ανοίξετε και να κλείσετε το παράθυρο με την εμφάνιση ή την απόκρυψή του. Προσθήκη ακροατές εκδηλώσεων στο κουμπί για να ενεργοποιηθεί για να ανοίξει και να κλείσει όταν κάνετε κλικ σε αυτό.
Πρώτα επιλέξτε τα σχετικά στοιχεία χρησιμοποιώντας τις κλάσεις CSS που ορίσατε στο HTML:
αφήνω modalContent = έγγραφο.querySelector(".modal-content");
αφήνω openModal = έγγραφο.querySelector(".open-modal");
αφήνω κλείνωModal = έγγραφο.querySelector(".close-modal");
αφήνω blurBg = έγγραφο.querySelector(".blur-bg");Προσθέστε ένα πρόγραμμα ακρόασης συμβάντων στο ανοιχτό-τροπικό κουμπί ώστε να ανοίγει το παράθυρο όταν κάνετε κλικ σε αυτό.
openModal.addEventListener("Κάντε κλικ", λειτουργία () {
modalContent.classList.remove("κρυφό-τροπικό");
blurBg.classList.remove("κρυφό-θολό");
});Εκτελέστε τις αντίθετες ενέργειες για να χειριστείτε το κλείσιμο του αναδυόμενου παραθύρου, αλλά, αυτή τη φορά, τυλίξτε τις σε μια συνάρτηση με όνομα. Αυτό θα χειριστεί τη συμπεριφορά για πολλά συμβάντα που μπορεί να προκαλέσουν το κλείσιμο του παραθύρου του modal:
αφήνω closeModalFunction = λειτουργία () {
modalContent.classList.add("κρυφό-τροπικό")
blurBg.classList.add("κρυφό-θολό")
}Προσθέστε προγράμματα ακρόασης συμβάντων για να χειριστούν τα κλικ στο φόντο ή το κουμπί κλεισίματος και την περίπτωση όπου ο χρήστης πατά το πλήκτρο Escape.
blurBg.addEventListener("Κάντε κλικ", closeModalFunction);
closeModal.addEventListener("Κάντε κλικ", closeModalFunction);
έγγραφο.addEventListener("keydown", λειτουργία (Εκδήλωση) {
αν (γεγονός.κλειδί "Διαφυγή"
&& !modalContent.classList.contains("κρυμμένος")
) {
closeModalFunction();
}
});
Τώρα, όταν κάνετε κλικ στο Γειά σου! κουμπί, εμφανίζεται το modal. Μπορείτε να το κλείσετε κάνοντας κλικ στο κουμπί ακύρωσης στα δεξιά του παραθύρου. Δείτε τον κωδικό στο codepen.io και αλληλεπιδρούν με το modal:
Χρήσεις αναδυόμενων παραθύρων
Η κύρια χρήση των αναδυόμενων/τροπικών παραθύρων στην ανάπτυξη Ιστού είναι η εστίαση σε ένα συγκεκριμένο στοιχείο στον ιστότοπο. Μόλις ενεργοποιηθεί, απενεργοποιεί την υπόλοιπη σελίδα προτρέποντας τον χρήστη να το προσέξει.
Τα αναδυόμενα παράθυρα ζωντανεύουν τη διεπαφή χρήστη σας. Μπορούν να ειδοποιήσουν και να επιστήσουν την προσοχή σε σημαντικές πληροφορίες στην ιστοσελίδα για τους χρήστες σας. Για να αφαιρέσετε το παράθυρο, ο χρήστης πρέπει να εκτελέσει κάποιο είδος ενέργειας. Με αυτόν τον τρόπο ο χρήστης μπορεί να αλληλεπιδράσει με το παράθυρο και να λάβει τις προβλεπόμενες πληροφορίες.
