Τροπικό παράθυρο JQuery - για ποιο σκοπό και πώς να το εγκαταστήσετε

Πίνακας περιεχομένων:

Τροπικό παράθυρο JQuery - για ποιο σκοπό και πώς να το εγκαταστήσετε
Τροπικό παράθυρο JQuery - για ποιο σκοπό και πώς να το εγκαταστήσετε
Anonim

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

Μπορείτε να βρείτε πολλά τέτοια παράθυρα στο Διαδίκτυο. Φαίνεται ότι χρειάζεται απλώς να τα αντιγράψετε και να τα επικολλήσετε στον ιστότοπό σας… Ωστόσο, δεν είναι όλα τόσο απλά. Όπως θα το είχε η τύχη, υπάρχει κάποια λεπτομέρεια που επιβραδύνει τα πάντα και είναι αδύνατο να λυθεί η εργασία, επειδή δεν υπάρχει απαραίτητη γνώση για αυτό. Ως εκ τούτου, αντί να εκφοβίσετε αμέσως ένα modal παράθυρο στο jQuery με πολλά ενδιαφέροντα χαρακτηριστικά που είναι δύσκολο να εφαρμοστούν, είναι καλύτερα να ξεκινήσετε με ένα μικρό, απλούστερο modal παράθυρο χωρίς περιττά προβλήματα.

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

Απαιτείται ένα παράθυρο jquery modal για την εμφάνιση περιεχομένου που ταιριάζει με τις πληροφορίες στη σελίδα και το συμπληρώνει.

jQuery - τι είναι;

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

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

Για να πείτε στο jquery ότι χρειάζεστε αυτό ή εκείνο το εφέ, υπάρχει μια γλώσσα CSS με φύλλα στυλ.

Γλώσσα CSS

Το CSS σημαίνει Cascading Style Sheets. Είναι πλέον αδύνατο να βρεθεί ένας ιστότοπος στο Διαδίκτυο που δεν χρησιμοποιεί αυτήν τη γλώσσα.

Επομένως, στα modal windows, το jquery και το CSS είναι σχεδόν απαραίτητα και απαραίτητα. Επομένως, εάν το jquery δεν περιλαμβάνεται, πρέπει να το κάνετε αυτό.

Για να γίνει αυτό, εισάγεται το εξής μέσα στην ετικέτα κεφαλιού:

jQuery
jQuery

Τι χρησιμεύουν τα modals;

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

Αναδυόμενο παράθυρο

Ένα αναδυόμενο παράθυρο jquery που εμφανίζεται μόνο μία φορά ανά σελίδα είναι μια παραλλαγή των modal windows.

Για να το εφαρμόσετε, πρέπει να κάνετε μια σειρά από βήματα.

Μπορείτε να χρησιμοποιήσετε ειδικά πρόσθετα για modal windows. Είναι καλύτερο να τα κατεβάσετε από ιστότοπους προγραμματιστών όπως το arcticModal. Συνδέεται ως εξής:

Παράθυρο τύπου jQuery
Παράθυρο τύπου jQuery

Χωρίς στυλ παραθύρου, ένα από τα τυπικά θέματα προσθηκών θα μοιάζει με αυτό:

jQuery απλό modal παράθυρο
jQuery απλό modal παράθυρο

Στη συνέχεια, συνδέεται η προσθήκη cookie:

Παράθυρο τύπου jQuery
Παράθυρο τύπου jQuery

Γράψιμο κώδικα HTML που παρέχει πληροφορίες στον χρήστη:

Παράθυρο τύπου jQuery
Παράθυρο τύπου jQuery

Η κλάση arctimonial-close που καθορίζεται στον κώδικα σημαίνει ότι το παράθυρο modal jQuery θα κλείσει μαζί της.

Επόμενο έρχεται το τελικό σενάριο:

jQuery popup mode
jQuery popup mode

Ορισμένες από τις παραμέτρους που χρησιμοποιούνται σημαίνουν τα εξής:

closeOnOverClick: θα καθορίσει εάν το παράθυρο κλείνει όταν γίνει κλικ στην επικάλυψη.

CloseOn Esc: σημαίνει κλικ στο Esc.

Expires: Καθορίζει το χρόνο για τον οποίο θα αποθηκευτεί το cookie. Στην προτεινόμενη έκδοση, αυτός ο χρόνος θα είναι εξήντα ημέρες, δηλαδή το παράθυρο δεν θα εμφανίζεται για δύο μήνες. Το cookie ενημερώνεται σε κάθε επίσκεψη.

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

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

Τύποι modal windows

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

Συνιστάται: