Δημιουργούμε ένα modal παράθυρο σε HTML5 και CSS3. Πώς να δημιουργήσετε ένα αναδυόμενο παράθυρο jQuery

3. Ένα παράδειγμα ενός παραθύρου modal jQuery που καλείται με αναφορά (με Επίδειξη)

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

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

Ας αρχίσουμε να εξετάζουμε τον κώδικα του απλούστερου παραθύρου που θα εμφανιστεί αμέσως
Κωδικός jQuery

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

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

Καλέστε το modal παράθυρο jQuery με αναφορά με CSS

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

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

Πρώτα, ας γράψουμε τμήμα html... Τοποθετούμε αυτόν τον κωδικό στο σώμα του εγγράφου σας.

Κλήση ενός τροπικού παραθύρου

Κωδικός CSS... Είτε σε ξεχωριστό αρχείο css είτε σε
Στον κώδικα jQuery, θα εστιάσουμε στη θέση του modal και της μάσκας, σκουρεύοντας σε αυτή την περίπτωση σταδιακά το φόντο.

Προσοχή! Μην ξεχάσετε να συμπεριλάβετε τη βιβλιοθήκη στην κεφαλή του εγγράφου!

Σύνδεση της βιβλιοθήκης από τον ιστότοπο της Google. Λοιπόν, ο ίδιος ο κώδικας jQuery.

Κωδικός JQuery

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

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

Τα HTML5 και CSS3 σάς επιτρέπουν να δημιουργείτε modals με εξαιρετική ευκολία.

Σήμανση HTML

Το πρώτο βήμα για τη δημιουργία ενός modal είναι η απλή και αποτελεσματική σήμανση:

Ανοίξτε το παράθυρο modal

Μέσα σε ένα στοιχείο div τοποθετείται το περιεχόμενο του τροπικού. Πρέπει επίσης να κανονίσετε έναν σύνδεσμο για να κλείσετε το παράθυρο. Για παράδειγμα, ας δημοσιεύσουμε μια απλή επικεφαλίδα και μερικές παραγράφους. Η πλήρης σήμανση για το παράδειγμά μας θα μοιάζει με αυτό:

Ανοίξτε το παράθυρο modal

Στυλ

Δημιουργήστε μια τάξη modalDialogκαι αρχίζουμε να σχηματίζουμε εμφάνιση:

ModalDialog (θέση: σταθερό; γραμματοσειρά-οικογένεια: Arial, Helvetica, sans-serif; επάνω: 0; δεξιά: 0; κάτω: 0; αριστερά: 0; φόντο: rgba (0,0,0,0,8); z-index : 99999; -webkit-transition: αδιαφάνεια 400ms ease-in; -moz-transition: αδιαφάνεια 400ms ease-in; μετάβαση: αδιαφάνεια 400ms ease-in; εμφάνιση: καμία; δείκτης-συμβάντα: κανένα;)

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

Το φόντο θα έχει μια μικρή διαφάνεια και θα τοποθετηθεί επίσης πάνω από όλα τα άλλα στοιχεία χρησιμοποιώντας την ιδιότητα z-δείκτης.

Τέλος, ρυθμίζουμε μεταβάσεις για την εμφάνιση του παραθύρου του modal μας και το αποκρύπτουμε σε ανενεργή κατάσταση.

Ίσως δεν γνωρίζετε το ακίνητο δείκτες-γεγονότα, αλλά σας επιτρέπει να ελέγχετε πώς αντιδρούν τα στοιχεία στο κλικ του ποντικιού. Ορίζουμε την τιμή στην τιμή της για την κλάση modalDialog, καθώς ο σύνδεσμος δεν πρέπει να ανταποκρίνεται στα κλικ του ποντικιού όταν είναι ενεργή η ψευδοκλάση “: Στόχος”.

Τώρα προσθέτουμε την ψευδοκλάση : στόχοςκαι στυλ για το τροπικό παράθυρο.

ModalDialog: στόχος (εμφάνιση: μπλοκ; δείκτης-συμβάντα: αυτόματο;). ModalDialog> div (πλάτος: 400 εικονοστοιχεία, θέση: σχετική, περιθώριο: 10% αυτόματο, συμπλήρωση: 5 εικονοστοιχεία 20 εικονοστοιχεία 13 εικονοστοιχεία 20 εικονοστοιχεία, ακτίνα περιγράμματος: 10 εικονοστοιχεία, φόντο: # fff; φόντο: -moz-linear-gradient (#fff, # 999), φόντο: -webkit-linear-gradient (#fff, # 999), φόντο: -o-linear-gradient (#fff, # 999); )

Ψευδοτάξη στόχοςαλλάζει τη λειτουργία εμφάνισης του στοιχείου, οπότε το modal μας θα εμφανίζεται όταν κάνετε κλικ στον σύνδεσμο. Αλλάζουμε και την αξία του ακινήτου δείκτες-γεγονότα.

Ορίζουμε το πλάτος του modal και τη θέση στη σελίδα. Ορίστε επίσης μια κλίση για το φόντο και τις στρογγυλεμένες γωνίες.

Κλείστε το παράθυρο

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

Κλείσιμο (φόντο: # 606061; χρώμα: #FFFFFF; ύψος γραμμής: 25 εικονοστοιχεία; θέση: απόλυτη; δεξιά: -12 εικονοστοιχεία; στοίχιση κειμένου: κέντρο; επάνω: -10 εικονοστοιχεία; πλάτος: 24 εικονοστοιχεία; διακόσμηση κειμένου: κανένα; γραμματοσειρά- βάρος: έντονη; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px # 000; -webkit-box-shadow: 1px1p 3px # 000; box-shadow: 1px 1px 3px # 000;) .close: τοποθέτηση του δείκτη (φόντο: # 00d9ff;)

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

Ένα modal παράθυρο είναι ένα μικρό παράθυρο που εμφανίζεται για να πει κάτι σημαντικό. Είναι δύσκολο να φτιάξεις ένα modal χωρίς Bootstrap; Ας προσπαθήσουμε να το καταλάβουμε.

Πού να εισαγάγετε στο DOM;

Συνήθως, το βάζω πριν από το κλείσιμο του body tag.

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

Κεντράρισμα

Εδώ είναι ένα από τα αγαπημένα μου κόλπα όπου μπορείτε να κεντράρετε τόσο κάθετα όσο και οριζόντια χωρίς να γνωρίζετε το ύψος και το πλάτος.

Modal (θέση: σταθερό; επάνω: 50%; αριστερά: 50%; μετατροπή: μετάφραση (-50%, -50%);)

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

Θέση - σταθερή;

Σημειώστε ότι χρησιμοποιήσαμε θέση: σταθερή; έτσι ώστε οι χρήστες να μπορούν να κάνουν κύλιση προς τα κάτω ενώ το ανοιχτό modal βρίσκεται πάντα στη μέση. Πιστεύω, γενικά, ότι η σταθερή τιμή μπορεί ήδη να χρησιμοποιηθεί με ασφάλεια, ακόμη και στις κινητές συσκευές... Ωστόσο, εάν χρειάζεται να τοποθετήσετε παλαιότερα τηλέφωνα, δοκιμάστε να τα αντικαταστήσετε με απόλυτο.

Ας υπολογίσουμε το πλάτος

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

Modal (πλάτος: 600 px;)

Ωστόσο, υπάρχουν οθόνες που έχουν πλάτος μικρότερο από 600 px. Για να διορθώσετε την κατάσταση, ας προσθέσουμε ένα μέγιστο πλάτος.

Modal (πλάτος: 600 px, μέγιστο πλάτος: 100%;)

Υψος

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

Modal (ύψος: 400 px; μέγιστο ύψος: 100%;)

Ξεχείλισμα

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

• Μπορεί να θέλουμε να χρησιμοποιήσουμε στοιχεία που δεν πρέπει να κάνουν κύλιση.
• Η υπερχείλιση θα περικόψει τη σκιά που θα χρησιμοποιήσουμε.

Θα πρότεινα να χρησιμοποιήσετε ένα εσωτερικό δοχείο:

Δεδομένου ότι θα έχουμε περιεχόμενο που χρειάζεται κύλιση, πρέπει να ορίσουμε το ύψος. Υπάρχουν πολλές επιλογές. Εδώ είναι ένα από αυτά:

Modal-guts (θέση: απόλυτη; επάνω: 0; αριστερά: 0; πλάτος: 100%; ύψος: 100%; / * padding * / padding: 20 px 50 px 20 px 20 px; / * επιτρέπεται η κύλιση * / υπερχείλιση: αυτόματη;)

Κουμπιά

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

Αντιμετώπιση συσκότισης

Ένα κανονικό παράθυρο μοντάλ είναι κατασκευασμένο με ένα εντελώς σκοτεινό φόντο. Αυτό είναι χρήσιμο για διάφορους λόγους:

• μπορεί να σκουρύνει την υπόλοιπη οθόνη
• μπορεί να αποτρέψει τα κλικ/αλληλεπιδράσεις με περιεχόμενο γύρω από το modal
• μπορεί να χρησιμοποιηθεί ως τεράστιο κουμπί κλεισίματος

Τυπική περίπτωση χρήσης:

.modal (/ * όλα όσα περιγράψαμε ήδη παραπάνω * / z-index: 1010;) .modal-overlay (z-index: 1000; position: fixed; top: 0; left: 0; πλάτος: 100%; height: εκατό%; )

Κλείσιμο με τάξη, όχι άνοιγμα με τάξη

Παρατήρησα ένα σύνηθες φαινόμενο όπου η προεπιλογή .τροπικόςη κλάση είναι κρυφή όπως για παράδειγμα οθόνη: καμία;Στη συνέχεια, για να ανοίξετε, προσθέστε την τάξη .modal.open (εμφάνιση: μπλοκ;)

Ωστόσο, αυτό μπορεί να είναι κακό, επειδή μπορεί να είναι το modal σας οθόνη: flex;και οθόνη: μπλοκ;θα το ξαναγράψει.

Modal (.display: flex;) .modal.closed (εμφάνιση: καμία;)

Προσθήκη JavaScript

var modal = document.querySelector ("# modal"), modalOverlay = document.querySelector ("# modal-overlay"), closeButton = document.querySelector ("# close-button"), openButton = document.querySelector ("# ανοιχτό -κουμπί "); closeButton.addEventListner ("κλικ", συνάρτηση () (modal.classList.toggle ("κλειστό"); modalOverlay.classList.toggle ("κλειστό");)); openButton.addEventListner ("κλικ", συνάρτηση () (modal.classList.toggle ("κλειστό"); modalOverlay.classList.toggle ("κλειστό");));

Τα modal μπορούν να αντιμετωπίζονται όπως πολύ καλός τρόποςαγοράστε επιπλέον χώρο στην οθόνη, τραβήξτε την προσοχή του χρήστη του ιστότοπου, προσφέρετέ του μια επιλογή ή προειδοποιήστε για αλλαγές. Ή ως dirty hack που σας επιτρέπει να επιβάλλετε πληροφορίες στον επισκέπτη που διαφορετικά δεν θα έδινε σημασία.

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

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

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

Φαίνεται ότι τα modals δεν μπορούν να επηρεάσουν σοβαρά τον χρήστη, εφόσον περιέχουν απλά και εύκολα ορατά στοιχεία ελέγχου. Μπορείτε πάντα να πατήσετε το «σταυρό» στη γωνία της οθόνης, να διατρέξετε το κείμενο ή, τέλος, να συμπληρώσετε αυτήν τη φόρμα εγγραφής.

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

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

Η σημασιολογία του κώδικα κάνει τον ιστότοπο πιο προσβάσιμο

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

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

Στοιχείο