ΣπίτιΕνδιαφέρωνΜείωση του φόντου κατά την εμφάνιση ενός παραθύρου. Θολό φόντο με CSS3. Όμορφα κουτιά διαλόγου
Μείωση του φόντου κατά την εμφάνιση ενός παραθύρου. Θολό φόντο με CSS3. Όμορφα κουτιά διαλόγου
Είναι αρκετά σύνηθες να βλέπουμε modal παράθυρα σε ιστότοπους και όλα αυτά χρησιμοποιούνται για διαφορετικές εργασίες. Στην πραγματικότητα, αυτό είναι ένα αρκετά ισχυρό εργαλείο που σας επιτρέπει να κάνετε τη διεπαφή του ιστότοπου πιο διαδραστική και βολική. Για παράδειγμα, τα modal windows μπορούν να χρησιμοποιηθούν για διάφορες μορφές, όπως μια φόρμα εξουσιοδότησης, μια φόρμα ανατροφοδότηση, παραγγέλνοντας αγαθά, και ποτέ δεν ξέρεις.
Σε αυτήν την ανάρτηση, θα εξετάσουμε ένα παράδειγμα για το πώς να φτιάξετε ένα απλό παράθυρο modal με χρησιμοποιώντας jQueryκαι CSS. Ιδιορρυθμία αυτό το παράδειγμαστο ότι δεν απαιτείται εδώ, λοιπόν, με εξαίρεση την ίδια τη βιβλιοθήκη jQuery.
Τοποθετούμε τον κωδικό του παραθύρου modal στη σελίδα:
Κλείσε
Άνοιγμα παραθύρου modal
Όπως μπορείτε να δείτε από τη σήμανση, το ίδιο το μπλοκ του modal είναι ένα div με το χαρακτηριστικό id= modal_form, το οποίο περιέχει το στοιχείο span με id= modal_close. Αυτό το στοιχείο θα χρησιμεύσει ως κουμπί για το κλείσιμο του παραθύρου modal, επιπλέον, κάτω από το μπλοκ υπάρχει ένα μπλοκ div με το χαρακτηριστικό id= επικάλυμμα, που χρησιμεύει επίσης για να σκουρύνει το φόντο. Το τροπικό παράθυρο θα ανοίξει από έναν σύνδεσμο, με την κλάση τροπικός.
Για modal_formορίσαμε ένα σταθερό πλάτος και ύψος και μετά κεντράραμε τη θέση στο κέντρο της οθόνης. Για το υπόστρωμα του μοντικού παραθύρου ( επικάλυμμα) ορίζουμε το μέγεθος στο πλάτος της οθόνης, γεμίζουμε με διαφάνεια και το αποκρύπτουμε επίσης από προεπιλογή. ιδιαίτερη στιγμή με z-δείκτης, το modal θα πρέπει να έχει το μεγαλύτερο από όλα τα στοιχεία της σελίδας και το εξώφυλλο πρέπει να έχει το μεγαλύτερο από όλα τα στοιχεία εκτός από το ίδιο το modal.
Τώρα στο πιο βασικό, αυτός είναι ο κώδικας javascript. Για το modal παράθυρο, θα χρησιμοποιηθούν δύο κύρια συμβάντα, αυτό είναι το άνοιγμα του - κάνοντας κλικ σε ένα στοιχείο με την κλάση τροπικός, στην περίπτωσή μας αυτός είναι ένας σύνδεσμος και το κλείσιμο του παραθύρου modal είναι ένα κλικ στο εξώφυλλο ( επικάλυμμα), ή κάνοντας κλικ στο κουμπί κλεισίματος, στην περίπτωσή μας είναι ένα στοιχείο span με id= modal_close.
$(document).ready(function() ( $(".modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // animate the display cover συνάρτηση ()( // επόμενη εμφάνιση του παραθύρου mod. $("#modal_form") .css("display", "block") .animate((opacity: 1, top: "50%"), 200); ) ); )); // κλείσιμο του παραθύρου του modal $("#modal_close, #overlay").click(function()( $("#modal_form") .animate((opacity: 0, top: "45%") , 200, // μείωση της συνάρτησης διαφάνειας()( // μετά την κίνηση $(this).css("display", "none"); // απόκρυψη παραθύρου $("#overlay"). fadeOut(400); // απόκρυψη φόντου ) ); )); ));
Με το animate αλλάζουμε την κατακόρυφη θέση μπλουζακαθώς και τη διαφάνεια αδιαφάνεια, και με αυτό παίρνουμε ενδιαφέρον αποτέλεσμα. Ένα παρόμοιο εφέ χρησιμοποιείται τόσο όταν ανοίγει το παράθυρο όσο και όταν είναι κλειστό. Η διαφορά είναι ότι η σειρά εφαρμογής των ιδιοτήτων για μπλοκ αλλάζει, οπτικοποιώντας έτσι το άνοιγμα και το κλείσιμο του παραθύρου.
3. Ένα παράδειγμα ενός τρόπου λειτουργίας jQuery που καλείται μέσω σύνδεσης (με Επίδειξη)
Πιθανότατα, έχετε ήδη δει ένα αναδυόμενο παράθυρο τρόπου λειτουργίας περισσότερες από μία φορές στο Διαδίκτυο - επιβεβαίωση εγγραφής, προειδοποίηση, πηγή πληροφοριών, μεταφόρτωση αρχείων και πολλά άλλα. Σε αυτό το σεμινάριο, θα προσφέρω μερικά παραδείγματα για το πώς να δημιουργήσετε τα απλούστερα modal παράθυρα.
Δημιουργήστε ένα απλό αναδυόμενο παράθυρο
Ας αρχίσουμε να εξετάζουμε τον κώδικα του απλούστερου παραθύρου modal, το οποίο θα εμφανιστεί αμέσως κώδικας jquery
Επικολλήστε τον κωδικό οπουδήποτε μέσα σώματη σελίδα σας. Αμέσως μετά τη φόρτωση της σελίδας, χωρίς εντολές, θα δείτε ένα παράθυρο όπως αυτό:
Αλλά ο παρακάτω κώδικας θα εκτελεστεί μετά τη φόρτωση ολόκληρης της σελίδας στο πρόγραμμα περιήγησης. Στο παράδειγμά μας, μετά τη φόρτωση της σελίδας με εικόνες, θα εμφανιστεί ένα απλό αναδυόμενο παράθυρο:
Κλήση ενός modal jQuery από έναν σύνδεσμο με CSS
Το επόμενο βήμα είναι η δημιουργία τροπικό παράθυροόταν κάνετε κλικ στον σύνδεσμο. Το φόντο θα σκουραίνει σιγά σιγά.
Μπορείτε συχνά να δείτε ότι οι φόρμες σύνδεσης και εγγραφής βρίσκονται σε τέτοια παράθυρα. Ας ξεκινήσουμε δουλειά
Για να ξεκινήσουμε, ας γράψουμε τμήμα html. Τοποθετούμε αυτόν τον κωδικό στο σώμα του εγγράφου σας.
Κλήση ενός τροπικού παραθύρου
Τροπικό κείμενο παραθύρου
Κλείσε
Κείμενο στο παράθυρο τρόπου λειτουργίας.
Κωδικός CSS. Είτε σε ξεχωριστό αρχείο css είτε σε
Στον κώδικα jQuery, θα εστιάσουμε στη θέση του modal και της μάσκας, στην περίπτωσή μας, στο σταδιακό σκουρόχρωμο φόντο.
Προσοχή! Μην ξεχάσετε να συμπεριλάβετε τη βιβλιοθήκη στην κεφαλή του εγγράφου!
Σύνδεση της βιβλιοθήκης από τον ιστότοπο της Google. Λοιπόν, ο ίδιος ο κώδικας jQuery.
Κωδικός jQuery
Τα Modal παράθυρα αποτελούν αναπόσπαστο μέρος μοντέρνο σχεδιασμό ιστοσελίδων, χρησιμοποιώντας τα, ο προγραμματιστής μπορεί να καταφύγει στη μέθοδο του looping σε μία σελίδα και όχι στην ανακατεύθυνση του επισκέπτη σε βοηθητικές σελίδες. Σε αυτό το σεμινάριο, θα δούμε πώς να δημιουργήσετε εκπληκτικά παράθυρα με θολό φόντο για έναν ιστότοπο με χρησιμοποιώντας jQueryκαι CSS3. Χάρη σε αυτούς τους κανόνες, θα δημιουργήσουμε ένα θολό φόντο όταν εμφανιστεί το παράθυρο, το οποίο θα δένει το βλέμμα του επισκέπτη μόνο με τις απαραίτητες πληροφορίες στον ιστότοπο.
Θολό φόντο με CSS3
Τα οικονομικά νέα είναι τα καλύτερα μόνο εδώ: Drobakha
Η κίνηση του παραθύρου θα ρυθμιστεί με τέτοιο τρόπο ώστε όταν κάνετε κλικ στο κουμπί εμφάνισης, το παράθυρο θα κινείται από πάνω προς τα κάτω, ενώ θα αυξάνει αυτόματα το θάμπωμα του φόντου.
Βήμα 1: HTML
Θα έχουμε ένα κοντέινερ που θα περιέχει: τίτλο, περιγραφή και μετά προσθέτουμε μια κλάση για το κουμπί με την κλάση toggleModalγια να ανοίξετε ένα παράθυρο τρόπου λειτουργίας:
επί κεφαλής
Περιγραφή
Τίτλος για το παράθυρο
Οι καρτέλες είναι ένα πολύ ενδιαφέρον και βολικό πράγμα κατά τη δημιουργία ενός ιστότοπου, σας επιτρέπει να οργανώνετε σωστά τις πληροφορίες, ενώ εξοικονομείτε χώρο στον ιστότοπο.
Τότε πρέπει να προσθέσουμε μια τάξη το modal είναι ενεργό, αυτή η κλάση θα είναι υπεύθυνη για την κλήση του παραθύρου modal, modal_headerείναι υπεύθυνος για τον τίτλο και το στυλ του παραθύρου.
Βήμα 2: CSS
Τώρα ας περάσουμε στο styling, το πρώτο βήμα είναι η κατηγορία κουμπί,το οποίο θα είναι υπεύθυνο, το μαντέψατε, για τα κουμπιά στον ιστότοπο, ορίσαμε τις σωστές παραμέτρους εμφάνισης για αυτό:
Τα στυλ είναι αρκετά απλά, αποθηκεύονται σε ξεχωριστό αρχείο και δεν θα πρέπει να προκαλούν δυσκολίες κατά την επεξεργασία τους για έναν προγραμματιστή που έχει συναντήσει ποτέ CSS.
Βήμα 3JS
Το τελευταίο, αλλά όχι λιγότερο σημαντικό, θα είναι η αυτόματη θόλωση του φόντου όταν εμφανίζεται το μενού, καθώς και η δυνατότητα κλικ στους συνδέσμους, μικροί κανόνες θα μας βοηθήσουν σε αυτό. JS:
Ως αποτέλεσμα, λαμβάνουμε υπέροχα παράθυρα modal που είναι ευχάριστα στο μάτι του επισκέπτη και δεν γεμίζουν το σχέδιό σας.
1. Παράθυρο Modal στο jQuery "Simple Modal Box"
2. Πρόσθετο jQuery "LeanModal"
Εμφάνιση περιεχομένου σε modal windows. Για να δείτε την προσθήκη σε δράση στη σελίδα επίδειξης, κάντε κλικ στον σύνδεσμο: Φόρμα εγγραφής ή Βασικό περιεχόμενο.
3. Πρόσθετο jQuery "ToastMessage"
Αναδυόμενα μηνύματα. Πρόσθετο σε δύο εκδόσεις. Σε μια περίπτωση, τα μηνύματα εξαφανίζονται από μόνα τους, μετά από ορισμένο χρόνο, στη δεύτερη υλοποίηση, για να κλείσετε το μήνυμα, πρέπει να κάνετε κλικ στο κουμπί.
4. Περιεχόμενο που εμφανίζεται στο παράθυρο modal
Προσθήκη αποκάλυψης. Για να δείτε την προσθήκη σε δράση, κάντε κλικ στο κουμπί "Fire A Reveal Modal" στη σελίδα επίδειξης.
5. Pretty Dialog Boxes
Κάντε κλικ στο σταυρό στη σελίδα επίδειξης για να δείτε την προσθήκη σε δράση.
6. Mootools Modal Window, MooDialog Plugin
7. Αναδυόμενη γραμμή jQuery στο επάνω μέρος της οθόνης
8.jQuery αναδυόμενο παράθυρο
Πρόσθετο jQuery για την εμφάνιση μιας φόρμας επικοινωνίας σε ένα αναδυόμενο παράθυρο.
10. MooTools "LightFace" Plugin για την υλοποίηση διαλόγων Facebook
Παράθυρα διαλόγου τύπου Facebook. Εκτός από στατικές πληροφορίες, μπορείτε να βάλετε εικόνες, πλαίσια, αιτήματα Ajax στα παράθυρα. Πολλές ρυθμίσεις για το πρόσθετο, ένα πολύ ισχυρό εργαλείο. Φαίνεται πολύ κομψό και λειτουργικό. Ακολουθήστε τους συνδέσμους στη σελίδα επίδειξης για να δείτε παραδείγματα με διαφορετικό περιεχόμενο.
11. Παράθυρο τύπου jQuery
Προσεγμένο αναδυόμενο παράθυρο διαλόγου jQuery.
12. jQuery Modals
Ωραία τροπικά αναδυόμενα παράθυρα. Τρία στυλ. Η δοκιμαστική σελίδα έχει 3 συνδέσμους για να καλέσετε τα παράθυρα.
13. jQuery Modals
Αναδυόμενα παράθυρα πολλαπλών τύπων. Για να δείτε την προσθήκη σε δράση, κάντε κλικ στον σύνδεσμο στη σελίδα επίδειξης.
15. Αναδυόμενο μήνυμα στο επάνω μέρος της σελίδας
Το μήνυμα εμφανίζεται στην κορυφή της σελίδας, η οποία, με τη σειρά της, θαμπώνει. Κάντε κλικ στην ετικέτα "Κάντε κλικ σε εμένα" στη σελίδα επίδειξης για να δείτε ένα αναδυόμενο μήνυμα. Κάνοντας κλικ στο σταυρό θα κλείσει. Υλοποιήθηκε με jQuery.
16. Παράθυρο Modal "ModalBox" σε javascript
Εφαρμογή σύγχρονων τροπικών διαλόγων χωρίς τη χρήση αναδυόμενων παραθύρων και επαναφόρτωσης σελίδων. Στη σελίδα επίδειξης, κάντε κλικ στο κουμπί "Έναρξη επίδειξης" για να δείτε πώς λειτουργεί το σενάριο.
17. Πρόσθετο "Leightbox" χρησιμοποιώντας τη βιβλιοθήκη Πρωτότυπου
Πρόσθετο για την εμφάνιση περιεχομένου σε modal windows.
Μιλώντας για τις διάφορες τεχνικές κατασκευής τοποθεσιών, θα ήταν παράλογο να μην μιλήσουμε για μερικούς από τους τρόπους δημιουργίας τροπικών παραθύρων. Δεν θα μιλήσουμε για το σκοπό, τη χρησιμότητα και τα αναδυόμενα προβλήματα της χρήσης αναδυόμενων, modal παραθύρων. Ας ρίξουμε μια ματιά σε ένα μόνο από τα πολλά παραδείγματα δημιουργίας τέτοιων παραθύρων. Υπάρχουν περιπτώσεις όπου δεν είναι δυνατή η χρήση ειδικών προσθηκών, για παράδειγμα, όπως και, οπότε αξίζει να καταλάβετε πώς μπορείτε να δημιουργήσετε τη δική σας.
Ας δούμε πώς να το κάνουμε:
HTML
Ας ξεκινήσουμε προσθέτοντας ετικέτες με τα ακόλουθα χαρακτηριστικά:
href - #?w=500 καθορίζει το πλάτος του παραθύρου
Το rel είναι ένα μοναδικό χαρακτηριστικό για κάθε παράθυρο
class="poplight" – κλάση για την εμφάνιση ενός αναδυόμενου παραθύρου
<
a href=
"#?w=500"
rel=
"popup_name"
class
=
"poplight"
>Δείτε Παράθυρο σε δράση - Πλάτος = 500 εικονοστοιχεία
Δείτε Παράθυρο σε δράση - Πλάτος = 500 εικονοστοιχεία
Στη συνέχεια, πρέπει να δημιουργήσουμε την ενσωματωμένη σήμανση για το αναδυόμενο παράθυρο. Μπορείτε να το τοποθετήσετε οπουδήποτε στη σελίδα, για παράδειγμα, στο κάτω μέρος του περιεχομένου. Σημειώστε ότι το αναγνωριστικό αναδυόμενου παραθύρου ταιριάζει με το χαρακτηριστικό σχετετικέτα Αυτό θα συνδέσει τον σύνδεσμο και το αναδυόμενο παράθυρο μεταξύ τους.
επί κεφαλής
Όποιο κείμενο σας αρέσει
Και έτσι, καταλάβαμε την τοποθέτηση του παραθύρου μας στη σελίδα, τώρα ας το διακοσμήσουμε με τη βοήθεια στυλ, να του δώσουμε μια αξιοπρεπή εμφάνιση, ας πούμε έτσι.
Διάταξη CSS
Για μεγαλύτερη σαφήνεια, έχω γράψει μερικές εξηγήσεις για τις παραμέτρους στυλ του παραθύρου μας. Δεδομένου ότι τα αναδυόμενα παράθυρα μπορούν να έχουν διαφορετικά μεγέθη, δεν προσδιορίζουμε στο CSS αναδυόμενο_μπλοκτις άκρες του παραθύρου, υπολογίστε το απαιτούμενο μέγεθος, αυτή είναι μόνο η εργασία για .
Με το σχηματισμό του παραθύρου και του εμφάνισηχρησιμοποιώντας css, νομίζω ότι δεν θα υπάρξουν ιδιαίτερες δυσκολίες. Τα στυλ μπορούν να γραφτούν απευθείας σελίδα HTML, μεταξύ ετικετών
και, ή μπορείτε να το βάλετε σε ένα ξεχωριστό αρχείο των στυλ σας, συνήθως σε αυτό το αρχείο στυλ.css, ή κατι τετοιο.
εγκατάσταση jquery
Για την πλήρη λειτουργία του παραθύρου modal, πρέπει να συνδέσετε το jQuery, οι οποίοι δεν είναι εξοικειωμένοι με το έργο αυτής της βιβλιοθήκης, μπορείτε να διαβάσετε.
Λοιπόν, θα προχωρήσουμε. μπορείς τα περισσότερα τελευταία έκδοση jQuery από τον ιστότοπο της βιβλιοθήκης ή χρησιμοποιήστε ένα ξεχωριστό αρχείο που φιλοξενείται στα έγκατα της Google, συνδέοντάς το με το έγγραφο, στην ενότητα πριν από την ετικέτα κλεισίματος
τοποθετώντας αυτή τη γραμμή:
Στο επόμενο βήμα, εξετάστε το γέμισμα και τις λειτουργίες πρόσθετο jquery, για να ενεργοποιήσουμε το αναδυόμενο παράθυρο μας, ο κώδικας περιέχει μερικές επεξηγήσεις, για καλύτερη κατανόηση του τι κάνουμε.
πρόσθετο jquery
$(έγγραφο) . έτοιμο(συνάρτηση()( //Όταν κάνετε κλικ σε έναν σύνδεσμο με την κλάση poplight και το χαρακτηριστικό href της ετικέτας Με #$("a.poplight" ) . click(function () ( var popID = $(this) . attr("rel" ) ; //λαμβάνουμε το όνομα του παραθύρου, είναι σημαντικό να μην ξεχάσετε να αλλάξετε το όνομα στο χαρακτηριστικό rel του συνδέσμου κατά την προσθήκη νέων var popURL = $(αυτό) . attr("href"); // λάβετε το μέγεθος από το χαρακτηριστικό href του συνδέσμου//αίτημα και μεταβλητές από το href url varquery=popURL. διαίρεση("?"); var dim= ερώτημα[ 1 ] . διαίρεση("&"); var popWidth = dim[ 0] . split("=" ) [ 1 ] ; //τιμή συμβολοσειράς πρώτου ερωτήματος// Προσθέστε ένα κουμπί κλεισίματος στο παράθυρο$("#" + popID) . ξεθωριάζω() . css(( "width" : Number( popWidth ) ) . prepend( ""
)
;
//Προσδιορισμός περιθωρίου (περιθώριο) για στοίχιση στο κέντρο (κάθετα και οριζόντια) - προσθέτουμε 80 στο ύψος/πλάτος συμπεριλαμβανομένης της επένδυσης + πλάτους περιγράμματος που ορίζεται σε css var popMargTop = ($("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("#" + popID) . width() + 80 ) / 2 ; //Ορίστε την ποσότητα της εσοχής$("#" + popID) . css(( "margin-top" : - popMargTop, "margin-left" : - popMargLeft ) ; // Προσθέστε ένα ημιδιαφανές φόντο σκίασης$("σώμα") . προσαρτώ(" "
)
;
Το κοντέινερ //div θα γραφτεί πριν από την ετικέτα.
$("#fade" ) . css(( "φίλτρο" : "άλφα(αδιαφάνεια=80)" ) ). ξεθωριάζω() ; // διαφάνεια στρώσης, φίλτρο για χαζό IEεπιστροφή ψευδής ; ) ) ; //Κλείστε το παράθυρο και χαμηλώστε το φόντο$(έγγραφο) . on("click" , "a.close, #fade" , function () ( //κλείσιμο με κλικ έξω από το παράθυρο, π.χ. στο παρασκήνιο...$("#fade , .popup_block" ) . fadeOut(function () ( $("#fade, a.close") . remove() ; // ξεθωριάζει) ) ; επιστροφή ψευδής ; ) ) ; ) ) ;
Γενικά, αν δεν πας στη φύση και δεν φορτώσεις τον εαυτό σου με υπερβολικές ασυναρτησίες κώδικα, το υπέροχο παράθυρο μας είναι έτοιμο και περιμένει τις σκέψεις σου να μεταγραφούν σε κείμενο ή σε οποιοδήποτε άλλο ΧΡΗΣΙΜΕΣ ΠΛΗΡΟΦΟΡΙΕΣ. Για όσους θα ήθελαν να χρησιμοποιήσουν ένα modal παράθυρο για να τοποθετήσουν βίντεο ή εικόνες μεγάλης κλίμακας σε αυτό, συνιστούσα ωστόσο τη χρήση ειδικών προσθηκών όπως , καθώς το παραπάνω παράδειγμα ενός παραθύρου modal προορίζεται περισσότερο για ελαφριές και όχι πολύ βαριές πληροφορίες, αν και αυτό δεν είναι πρόβλημα εάν το επιθυμείτε.
Την επόμενη φορά σίγουρα θα το πω και θα δείξω με ένα παράδειγμα, και σίγουρα, πολλοί θα ενδιαφέρονται να μάθουν για άλλα αντικείμενα τρίτων στο αναδυόμενο παράθυρο. Μείνετε συντονισμένοι λοιπόν και μείνετε συντονισμένοι για ενημερώσεις!
Εκσυγχρονίζω: Έκδοση dm-modal.js v1.3 (15/01/2017) Διορθώθηκε: Αντικατέστησε την καταργημένη συνάρτηση .live(), χρησιμοποιεί σύνταξη href*=\\#. Το πρόσθετο λειτουργεί τώρα με τρέχουσες εκδόσειςΒιβλιοθήκες jQuery
Αυτό είναι όλο! Ελπίζω να πάρετε άλλο ένα χρήσιμο μάθημα.
