10 δωρεάν παραλλαγές παραθύρων Modal JavaScript

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

Αλλά, γιατί σχεδιάζετε κάτι από το μηδέν όταν μπορείτε να χρησιμοποιήσετε μια βιβλιοθήκη JS? Έχω συλλέξει το τα καλύτερα δωρεάν scripts που λειτουργούν με JavaScript εδώ για να δείτε και να ξεχωρίσετε τα αγαπημένα σας.

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

1. Tingle

Ένα από τα αγαπημένα μου ελεύθερα χειρόγραφα είναι Tingle.js. Του που βασίζεται σε βανίλια JavaScript χωρίς εξαρτήσεις, έτσι δεν χρειάζεστε βιβλιοθήκες jQuery ή Zepto.

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

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

Μπορείς να δεις όλα τα έγγραφα για το GitHub, μαζί με τον ελεύθερο πηγαίο κώδικα. Έχουν επίσης ένα demo link, έτσι μπορείτε ελέγξτε το Tingle σε δράση για να δείτε αν θα μπορούσε να χωρέσει στον ιστότοπό σας.

2. Τρόπος βανίλιας

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

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

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

3. plainModal

Αν θέλετε ένα πραγματικά απλό σενάριο, συνιστώ ανεπιφύλακτα plainModal. είναι που βασίζεται στο jQuery, αλλά είναι ένα από τα μικρότερα διαθέσιμα script scripts.

Κάνει μην χρησιμοποιείτε εξωτερικά αρχεία CSS ή εικόνας. Μόνο ένα σενάριο JS είναι το μόνο που χρειάζεστε.

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

Επιπλέον, μπορείτε ρυθμίστε το modal με μια γραμμή JavaScript διατηρώντας το μινιμαλιστικό θέμα αυτού του plugin.

4. Modal

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

Με Modaal, μπορείτε να πάρετε την τέλεια εμπειρία που περάσει τη δοκιμή WCAG 2.0 με μια σταθερή βαθμολογία αξιοπιστίας AA. Μπορείτε να δείτε ένα φανταστικό παράδειγμα στην κύρια σελίδα, μαζί με κάποια τεκμηρίωση κώδικα.

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

5. Scotch JS Modal

Η ομάδα ανάπτυξης στο Scotch.io δημοσιεύει εκπαιδευτικά σεμινάρια και οδηγούς για προγράμματα κωδικοποίησης. Το έργο τους είναι απίστευτο και δείχνει πραγματικά αυτό το script JavaScript, που φιλοξενείται στο Scotch GitHub.

Το modal αναπτύχθηκε από τον Ken Wheeler και το σενάριο αυτό ακόμη έχει ένα πλήρες σεμινάριο αν θέλετε να μάθετε πώς λειτουργεί. Ωστόσο, ο ελεύθερος κώδικας θα πρέπει να είναι αρκετός για τους περισσότερους προγραμματιστές από τότε που είναι εξαιρετικά ελαφρύ και εύκολο στη ρύθμιση. Δεν υπάρχουν εξαρτήσεις, ούτε καν δείγμα demo στο CodePen.

6. Bootbox.js

Ο πιο γρήγορος τρόπος ξεκινήσει ένα νέο πρόγραμμα web είναι μέσω Bootstrap. Πρόκειται για ένα ισχυρό πλαίσιο που ενθαρρύνει τους προγραμματιστές δημιουργήστε τα δικά τους πρόσθετα στη βιβλιοθήκη.

Ένα τέτοιο παράδειγμα είναι Bootbox.js, μια μικρή βιβλιοθήκη JavaScript, που σχεδιάστηκε αποκλειστικά για παράθυρα στυλ σε Bootstrap. Στην πραγματικότητα λειτουργεί σε παράθυρα διαλόγου όπου ο χρήστης μπορεί να κάνει κλικ στο OK ή να ακυρώσει, ανάλογα με το αίτημά σας.

Οι τυπικοί διάλογοι JavaScript είναι απαίσιοι, ακριβώς όπως κιβώτια συναγερμού. Το σενάριο του Bootbox προσφέρει ένα σταθερή εναλλακτική λύση για όσους εργάζονται στο οικοσύστημα BS3 / BS4.

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

7. iziModal.js

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

Δεν έχω ακόμα βρει άλλο σεντόνιο που προσφέρει ένα τέτοιο αισθητικά ευχάριστο σχέδιο. Βγαίνει από την πύλη με ένα πανέμορφο περιβάλλον χρήστη (UI) που μπορεί να συνδυαστεί σε σχεδόν οποιαδήποτε ιστοσελίδα. Ωστόσο, μπορείτε Επίσης, επανατοποθετήστε το σχέδιο για να ταιριάζει στις ανάγκες σας.

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

8. jQuery Modal

ο jQuery Modal plugin είναι ίσως το το πιο απλό script script για το jQuery που θα βρείτε ποτέ.

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

Συνολικά, αυτή η προσθήκη μέτρα μικρότερα από 1KB και αυτό λειτουργεί σε κάθε πιθανό πρόγραμμα περιήγησης που μπορείτε να φανταστείτε. Οι προγραμματιστές της jQuery θα πρέπει να διατηρούν αυτό το plugin αποθηκευμένο για γρήγορη πρόσβαση σε ένα απλό σενάριο τρόπου εκτέλεσης χωρίς τα πρόσθετα διακοσμητικά στοιχεία.

9. PicoModal

Επιστρέφοντας προς τη βανίλια JavaScript, έχουμε το PicoModal βιβλιοθήκη. Αυτό είναι πιθανώς ένα από τα μικρότερα σενάρια που θα βρείτε και τα οποία σχεδιάσατε τρέχετε τέλεια σε μια βόλτα Javelin backbone.

Το υποστηρίζει όλα τα σύγχρονα προγράμματα περιήγησης, συμπεριλαμβανομένων των κινητών προγραμμάτων περιήγησης για Android και Mobile Safari για iOS. Υποστηρίζει ακόμη και παλαιότερους IE browsers, που χρονολογούνται από τον IE7!

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

10. Avgrund

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

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

Ρίξτε μια ματιά στο σελίδα επίδειξης για να δούμε πώς τρέχει. Είναι σίγουρα έχει ένα μοναδικό στυλ και είναι δεσμεύεται να προσελκύσει την προσοχή με τις προσαρμοσμένες κινούμενες εικόνες που λειτουργούν.

Τελικές λέξεις

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