1. Παράθυρο Modal στο jQuery "Simple Modal Box" 2. Πρόσθετο jQuery "LeanModal"

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

3. Πρόσθετο jQuery "ToastMessage"

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

4. Περιεχόμενο που αναδύεται σε ένα παράθυρο τύπου modal

Πρόσθετο "Αποκάλυψη". Για να δείτε την προσθήκη σε δράση, κάντε κλικ στο κουμπί "Fire A Reveal Modal" στη σελίδα επίδειξης.

5. Χαριτωμένα πλαίσια διαλόγου

Κάντε κλικ στο σταυρό στη σελίδα επίδειξης για να δείτε την προσθήκη σε δράση.

6. Mootools modal window, plugin “MooDialog” 7. αναδυόμενο παράθυρο jQuery στο πάνω μέρος της οθόνης 8. jQuery αναδυόμενο παράθυρο

Πρόσθετο jQuery για εμφάνιση φόρμας ανατροφοδότησησε ένα αναδυόμενο παράθυρο.

10. MooTools plugin “LightFace” για υλοποίηση παράθυρα διαλόγου Facebook

Παράθυρα διαλόγου στυλ Facebook. Εκτός από στατικές πληροφορίες, μπορείτε να τοποθετήσετε εικόνες, καρέ, Ζητάει ο Άγιαξ. Πολλές ρυθμίσεις για το πώς λειτουργεί το πρόσθετο, ένα πολύ ισχυρό εργαλείο. Φαίνεται πολύ κομψό και λειτουργικό. Ακολουθήστε τους συνδέσμους στη σελίδα επίδειξης για να δείτε παραδείγματα με διαφορετικό περιεχόμενο.

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

Ένα καθαρό αναδυόμενο παράθυρο διαλόγου στο jQuery.

12. jQuery modal windows

Χαριτωμένα αναδυόμενα παράθυρα. Τρία στυλ. Η δοκιμαστική σελίδα περιέχει 3 συνδέσμους για άνοιγμα παραθύρων.

13. jQuery modal windows

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

15. Μήνυμα που εμφανίζεται στην κορυφή της σελίδας

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

16. Παράθυρο Modal "ModalBox" σε javascript

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

17. Πρόσθετο "Leightbox" χρησιμοποιώντας τη βιβλιοθήκη Πρωτότυπου

Πρόσθετο για την εμφάνιση περιεχομένου σε modal windows.

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

Ας δούμε πώς να το κάνουμε αυτό:

HTML

Ας ξεκινήσουμε προσθέτοντας ετικέτες με τα ακόλουθα χαρακτηριστικά:

• href - #?w=500 υποδηλώνει το πλάτος του παραθύρου
• rel – μοναδικό χαρακτηριστικό για κάθε παράθυρο
• class="poplight" – κλάση για την εμφάνιση ενός αναδυόμενου παραθύρου

< a href= "#?w=500" rel= "popup_name" class = "poplight" >Δείτε Παράθυρο σε δράση - Πλάτος = 500 εικονοστοιχεία

Δείτε Παράθυρο σε δράση - Πλάτος = 500 εικονοστοιχεία

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

Επικεφαλίδα

Όποιο κείμενο θέλετε

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

Διάταξη CSS

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

#fade ( εμφάνιση : κανένα ; /* --Προκαθορισμένο hidden--*/ background: rgba (7, 87, 207, 0.8); θέση: σταθερή; αριστερά: 0; κορυφή: 0; πλάτος: 100%; ύψος: 100%; αδιαφάνεια: .80; z-index: 9999; ) .popup_block ( display : none ; /*--κρυφό από προεπιλογή--*/ φόντο : #fff ; padding : 20px ; border : 8px solid rgb (134 , 134 , 134 ) ; float : αριστερά ; μέγεθος γραμματοσειράς : %; θέση: σταθερό; επάνω: 50%, αριστερά: 50%, χρώμα: #000; μέγιστο πλάτος: 750 εικονοστοιχεία; ελάχιστο πλάτος: 320 εικονοστοιχεία; ύψος: αυτόματο; δείκτης z: 99999; /*--σκιά μπλοκ CSS3 --*/ -webkit-box-shadow: 0px 0px 20px #000 ; -moz-box-shadow: 0px 0px 20px #000 ; box-shadow : 0px 0px 20px #000 ; /*--CSS3 rounding- / -webkit-border-radius: 12px ; -moz-border-radius: 12px ; border-radius : 12px ; ) .popup_block p (font-weight : 400 ; padding : 0 ; margin ;: line #0 ; -ύψος : 1,6 ; .popup_block h2 ( περιθώριο : 0 εικονοστοιχεία 0 10 εικονοστοιχεία ; χρώμα : rgb (43 , 43 , 43 ) ; βάρος γραμματοσειράς : 400 ; στοίχιση κειμένου : κέντρο ; σκιά κειμένου : 1 px /2 px ; * σχηματίστε ένα κουμπί κλεισίματος */ .close ( background-color : rgba ( 61 , 61 , 61 , 0.8 ) ; περίγραμμα : 2px στερεό #cccc ; ύψος: 25 px; Ύψος γραμμής: 20 px; θέση: απόλυτη; δεξιά: -17px; βάρος γραμματοσειράς: έντονη γραφή; text-align: κέντρο; κείμενο-διακόσμηση: κανένα; padding: 0; κορυφή: -17px; πλάτος: 25 px; -webkit-border-radius: 50% ; -moz-border-radius: 50% ; -ms-border-radius: 50% ; -o-border-radius: 50% ; ακτίνα συνόρων : 50% ; -moz-box-shadow: 1px 1px 3px #000 ; -webkit-box-shadow: 1px 1px 3px #000 ; box-shadow : 1px 1px 3px #000 ; ) .close : before ( χρώμα : rgba (255 , 255 , 255 , 0.9 ) ; περιεχόμενο : "X" ; μέγεθος γραμματοσειράς : 12 px ; text-shadow : 0 -1 px rgba (0 , 0 , 0 , ;) ;) . .close : hover (χρώμα φόντου: rgba ( 252 , 20 , 0 , 0,8 ) ; ) .shadow ( box-shadow : 4px 4px 10px #857373 ; -webkit-box-shadow: 4px 0px 4px #8px ; box-shadow: 4px 4px 10px #857373, padding: 0 ; ) /*--σταθερή τοποθέτηση για IE6--*/ * html #fade ( position : absolute ; ) * html .popup_block ( position : absolute ; )

#fade ( εμφάνιση: κανένα;/*--κρυφό από προεπιλογή--*/ φόντο: rgba(7, 87, 207, 0.8); θέση: σταθερό; αριστερά: 0; επάνω: 0; πλάτος: 100%, ύψος: 100%. 134, 134); float: αριστερά; μέγεθος γραμματοσειράς: 85%, θέση: σταθερό; επάνω: 50%, αριστερά: 50%, χρώμα: #000; μέγιστο πλάτος: 750 px; ελάχιστο πλάτος: 320 px; ύψος: αυτόματο ; z-index: 99999; /*--CSS3 box shadow--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--Στρογγυλοποίηση γωνίας CSS3--*/ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; ) .popup_block p (βάρος γραμματοσειράς: 400; padding: 0; περιθώριο: 0; χρώμα: #000; line-height: 1,6;).popup_block h2 ( περιθώριο: 0px 0 10px; color: rgb(43, 43, 43); font-weight: 400; text-align : center; text-shadow: 1px 1px 2px #0D0C0C; ) /* form a button close */ .close ( background-color: rgba(61, 61, 61, 0.8); περίγραμμα: 2px συμπαγές #ccc; ύψος: 25 px; Ύψος γραμμής: 20 px; θέση: απόλυτη; δεξιά: -17px; βάρος γραμματοσειράς: έντονη γραφή; text-align: κέντρο; κείμενο-διακόσμηση: κανένα; padding: 0; κορυφή: -17px; πλάτος: 25 px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; ακτίνα συνόρων: 50%; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; ) .close:before ( χρώμα: rgba(255, 255, 255, 0.9); περιεχόμενο: "X", μέγεθος γραμματοσειράς: 12 px; text-shadow: 0 -1 px rgba(0, 0, 0, 0.9); ) .close:hover (χρώμα φόντου: rgba(252, 20, 0, 0.8); ) .shadow ( box-shadow:4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px #857373 -mo; box-shadow:4px 4px 10px #857373; padding:0; ) /*--διορθώθηκε η τοποθέτηση για IE6--*/ *html #fade ( θέση: απόλυτη; ) *html .popup_block (θέση: απόλυτη; )

Με το σχηματισμό του παραθύρου και του εμφάνισηΜε χρησιμοποιώντας css, νομίζω ότι δεν θα υπάρξουν ιδιαίτερες δυσκολίες. Μπορείτε να καταχωρήσετε στυλ απευθείας στο σελίδα HTML, μεταξύ των ετικετών και ή μπορείτε να το βάλετε σε ένα ξεχωριστό αρχείο των στυλ σας, συνήθως αυτό είναι ένα αρχείο style.css ή κάτι τέτοιο.

Ρύθμιση JQuery

Για ολοκληρωμένη εργασία modal window, πρέπει να συνδέσετε το jQuery, όσοι δεν είναι εξοικειωμένοι με το έργο αυτής της βιβλιοθήκης μπορούν να διαβάσουν.

Λοιπόν, θα προχωρήσουμε. Μπορείτε να κάνετε τα περισσότερα τελευταία έκδοση JQuery από τον ιστότοπο της βιβλιοθήκης ή χρησιμοποιήστε ένα ξεχωριστό αρχείο που βρίσκεται στα βάθη της Google, συνδέοντάς το με το έγγραφο, στην ενότητα πριν από την ετικέτα κλεισίματος, τοποθετώντας την ακόλουθη γραμμή:

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

Πρόσθετο JQuery

$(έγγραφο) . ready(function () ( //Όταν κάνετε κλικ σε έναν σύνδεσμο με κατηγορία poplight και χαρακτηριστικό ετικέτας href με # $("a.poplight" ) . click(function () ( var popID = $(this) . attr("rel" ) ; //λάβετε το όνομα του παραθύρου, είναι σημαντικό να μην ξεχνάτε όταν προσθέτετε νέα να αλλάξετε το όνομα στο χαρακτηριστικό rel του link var popURL = $(this) . attr(" href" ) ; //λάβετε το μέγεθος από το χαρακτηριστικό href του συνδέσμου //query και τις μεταβλητές από href url var query= popURL. split ("?" ) ; var dim = ερώτημα[ 1 ] . split ("&" ) ; var popWidth = dim[ 0 ] . split ("=") [ 1 ] ; //πρώτη τιμή της συμβολοσειράς ερωτήματος //Προσθήκη κουμπιού κλεισίματος στο παράθυρο $( "#" + popID) . fadeIn() . css(( "width" : Number( popWidth ) ) ). ("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("# " + popID) . width() + 80 ) / 2 ; //Ορίστε την τιμή εσοχής $("#" + popID) .css(( "margin-top" : - popMargTop, "margin-left" : - popMargLeft ) ) ; //Προσθήκη ημιδιαφανούς σκουρόχρωμου φόντου $("body" ) . append("" ); Το κοντέινερ //div θα τοποθετηθεί πριν από την ετικέτα. $("#fade" ) . css(( "φίλτρο" : "άλφα(αδιαφάνεια=80)" ) ). ξεθωριάζω() ; //διαφάνεια στρώματος, φίλτρο για ηλίθιο IE return false ; ) ) ; //Κλείστε το παράθυρο και μειώστε το φόντο $(document) . on("click" , "a.close, #fade" , function () ( //κλείσιμο με κλικ έξω από το παράθυρο, δηλαδή στο φόντο... $("#fade , .popup_block" ) . fadeOut(function ( ) ( $("#fade, a.close" ) . remove() ; // fades smoothly ) ; return false ; ) ); ) ) ;

$(document).ready(function())( //Όταν κάνετε κλικ σε έναν σύνδεσμο με κατηγορία poplight και χαρακτηριστικό ετικέτας href με # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); //λάβετε το όνομα του παραθύρου, είναι σημαντικό να μην ξεχάσετε να αλλάξετε το όνομα στο χαρακτηριστικό rel του συνδέσμου κατά την προσθήκη νέων var popURL = $(this).attr("href"); //λάβετε το μέγεθος από το χαρακτηριστικό href του συνδέσμου //query και τις μεταβλητές από το ερώτημα href url var = popURL.split("?"); var dim= query.split( "&"); var popWidth = dim.split("="); //πρώτη τιμή της συμβολοσειράς ερωτήματος //Προσθήκη ενός κουμπιού κλεισίματος στο παράθυρο $("#" + popID).fadeIn().css(( "width": Number(popWidth) )).prepend(""); //Προσδιορίστε το περιθώριο (περιθώριο) για τη στοίχιση στο κέντρο (κάθετη και οριζόντια) - προσθέτουμε 80 στο ύψος / πλάτος, λαμβάνοντας υπόψη το padding + το πλάτος πλαισίου που ορίζεται στο css var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("# " + popID).width() + 80) / 2; //Ορίστε την τιμή εσοχής $("# " + popID).css(( "margin-top" : -popMargTop, "margin-left" : -popMargLeft ) ); //Προσθήκη ενός ημιδιαφανούς σκούρου φόντου $("body").append(""); //div το κοντέινερ θα εμφανίζεται πριν από την ετικέτα. $("#fade").css(("φίλτρο" : "alpha(opacity=80)")).fadeIn(); //διαφάνεια στρώματος, φίλτρο για ηλίθιο IE επιστροφή false. )); //Κλείστε το παράθυρο και ξεθωριάστε το φόντο $(document).on("click", "a.close, #fade", function() ( //close κάνοντας κλικ έξω από το παράθυρο, δηλαδή στο φόντο... $( "#fade , .popup_block").fadeOut(function() ($("#fade, a.close").remove(); //fade out )); return false; )); ));

Συμπέρασμα:

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

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

Ενημέρωση: Έκδοση dm-modal.js v1.3 (15/01/2017)
Διορθώθηκε: Αντικαταστάθηκε η παρωχημένη συνάρτηση .live(), χρησιμοποιώντας τη σύνταξη href*=\\#. Το πρόσθετο λειτουργεί πλέον με τις τρέχουσες εκδόσεις της βιβλιοθήκης jQuery

Αυτό είναι όλο! Ελπίζω να ήταν άλλο ένα χρήσιμο μάθημα.

Με όλο τον σεβασμό, Andrew

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

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

Τοποθετήστε τον κωδικό παραθύρου στη σελίδα:

κλείσιμο Άνοιγμα παραθύρου

Όπως μπορείτε να δείτε από τη σήμανση, το ίδιο το μπλοκ του παραθύρου modal είναι ένα div με το χαρακτηριστικό id= modal_formπου περιέχει ένα στοιχείο span με id= modal_close. Αυτό το στοιχείο θα χρησιμεύσει ως κουμπί για το κλείσιμο του παραθύρου του modal· επιπλέον, κάτω από το μπλοκ υπάρχει ένα μπλοκ div με το χαρακτηριστικό id= επικάλυμμα, που χρησιμεύει επίσης για να σκουρύνει το φόντο. Το modal παράθυρο θα ανοίξει μέσω σύνδεσης, με την κλάση τροπικός.

CSS για modal παράθυρο

#modal_form ( πλάτος: 300 εικονοστοιχεία; ύψος: 300 εικονοστοιχεία; ακτίνα περιγράμματος: 5 εικονοστοιχεία; περίγραμμα: 3 εικονοστοιχεία #000 συμπαγές; φόντο: #fff; θέση: σταθερή; επάνω: 45%; αριστερά: 50%; περιθώριο-πάνω: -150 εικονοστοιχεία; margin-left: -150 px; οθόνη: κανένα; αδιαφάνεια: 0; z-index: 5; padding: 20 px 10 px; ) #modal_form #modal_close (πλάτος: 21 px; ύψος: 21 px; θέση: απόλυτη; επάνω: 10 px; δεξιά: 10 εικονοστοιχεία; δρομέας: δείκτης; οθόνη: μπλοκ; ) #επικάλυψη (z-index:3; position:fixed; background-color:#000; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=80) ; πλάτος: 100%, ύψος: 100%, πάνω: 0, αριστερά: 0, δρομέας: δείκτης, οθόνη: κανένας, )

Για modal_formορίσαμε ένα σταθερό πλάτος και ύψος και μετά κεντράραμε τη θέση στο κέντρο της οθόνης. Για το τροπικό φόντο του παραθύρου ( επικάλυμμα) ορίζουμε το μέγεθος ώστε να ταιριάζει στο πλάτος της οθόνης, να γεμίζει με διαφάνεια και επίσης να το κρύβουμε από προεπιλογή. Ξεχωριστή στιγμή με z-δείκτης, το modal θα πρέπει να έχει το μεγαλύτερο από όλα τα στοιχεία στη σελίδα και το εξώφυλλο πρέπει να έχει το μεγαλύτερο από όλα τα στοιχεία εκτός από το ίδιο το modal.

Τώρα στο πιο βασικό πράγμα, αυτός είναι ο κώδικας javascript. Δύο κύρια συμβάντα θα χρησιμοποιηθούν για το modal παράθυρο: το άνοιγμά του - κλικ σε ένα στοιχείο με την κλάση τροπικός, στην περίπτωσή μας αυτός είναι ένας σύνδεσμος και το κλείσιμο του παραθύρου modal είναι ένα κλικ στο εξώφυλλο ( επικάλυμμα), ή κάντε κλικ στο κουμπί κλεισίματος, στην περίπτωσή μας αυτό είναι ένα στοιχείο span με id= modal_close.

$(document).ready(function() ( $(".modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // κινούμενα την εμφάνιση του η συνάρτηση εξωφύλλου ()( // επόμενη εμφάνιση του παραθύρου 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 αλλάζουμε την κατακόρυφη θέση μπλουζα, καθώς και τη διαφάνεια αδιαφάνεια, και με αυτό έχουμε ένα ενδιαφέρον αποτέλεσμα. Ένα παρόμοιο εφέ χρησιμοποιείται τόσο κατά το άνοιγμα ενός παραθύρου όσο και κατά το κλείσιμό του. Η διαφορά είναι ότι η σειρά με την οποία εφαρμόζονται οι ιδιότητες στα μπλοκ αλλάζει, οπτικοποιώντας έτσι το άνοιγμα και το κλείσιμο του παραθύρου.

Τα modal windows αποτελούν αναπόσπαστο μέρος του σύγχρονου σχεδιασμού ιστοσελίδων· με τη βοήθειά τους, ο προγραμματιστής μπορεί να καταφύγει στη μέθοδο του looping σε μία σελίδα και όχι στην ανακατεύθυνση του επισκέπτη σε δευτερεύουσες σελίδες. Σε αυτό το σεμινάριο θα εξετάσουμε πώς να δημιουργήσετε εκπληκτικά παράθυρα modal με θολό φόντο για τον ιστότοπό σας χρησιμοποιώντας jQuery και CSS3. Χάρη σε αυτούς τους κανόνες, θα δημιουργήσουμε ένα θολό φόντο όταν εμφανιστεί το παράθυρο, το οποίο θα δένει το μάτι του επισκέπτη μόνο με τις απαραίτητες πληροφορίες στον ιστότοπο.

Modal παράθυρα με θολό φόντο σε CSS3

Τα καλύτερα οικονομικά νέα είναι μόνο εδώ: Drobakha

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

Βήμα 1. HTML

Θα έχουμε ένα κοντέινερ που θα περιέχει: τίτλο, περιγραφή και, στη συνέχεια, προσθέτουμε μια κλάση για το κουμπί με την κλάση toggleModal για να ανοίξει το παράθυρο modal:

Επικεφαλίδα

Περιγραφή

Άνοιγμα άρθρου Τίτλος για παράθυρο

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

Κλείσε

Στη συνέχεια, πρέπει να προσθέσουμε την κλάση modal is-active, αυτή η κλάση θα είναι υπεύθυνη για την κλήση του παραθύρου modal, η modal__header είναι υπεύθυνη για τον τίτλο και το στυλ του παραθύρου.

Βήμα 2: CSS

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

Κουμπί ( φόντο: κανένα; κλιπ φόντου: padding-box; οθόνη: inline-block; περίγραμμα: 0; user-select: none; -webkit-touch-callout: none; -webkit-appearance: button; -webkit-user -select: κανένας; -moz-user-select: κανένας; -ms-user-select: κανένας; )

Κοντέινερ (θέση: σχετική, περιθώριο: 0 αυτόματο, μέγιστο πλάτος: 960 εικονοστοιχεία, μέγεθος κουτιού: πλαίσιο περιγράμματος, επένδυση επάνω: 40 εικονοστοιχεία; )

άρθρο ( φόντο: #fff; padding: 20px; margin-bottom: 40px; border-radius: 5px; ) .modal ( display: none; position: fixed; top: 50%; πλάτος: 100%; ύψος: auto; margin -top: -150 px; χρώμα φόντου: $χρώμα-λευκό; περίγραμμα-ακτίνα: 3px; z-index: 999; box-shadow: 0px 1px 3px 0px darken($color-bg, 10%); @media #( $small) ( αριστερά: 50%; περιθώριο-αριστερά: -260 εικονοστοιχεία; μέγιστο πλάτος: 520 εικονοστοιχεία; ) &.is-active ( οθόνη: μπλοκ; κινούμενη εικόνα: γραμμική διαφάνεια 1 δευτερολέπτου; ) .inner ( θέση: σχετική; padding: 20 px .

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

Βήμα 3. JS

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

$("body").addClass("is-blurred"); $(".toggleModal").on("κλικ", συνάρτηση (γεγονός) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass ("είναι θολή"); ));

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

3. Παράδειγμα παραθύρου modal jQuery που καλείται από έναν σύνδεσμο (από το Demo)

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

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

$(document).ready(function()
{
alert("Κείμενο σε αναδυόμενο παράθυρο");
});

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

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

$(window).load(function()
{
alert("Η φόρτωση της σελίδας ολοκληρώθηκε!)");
});

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

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

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

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

Τροπικό κείμενο παραθύρου
Κλείσε
Κείμενο σε παράθυρο τρόπου λειτουργίας.

Κωδικός CSS. Είτε σε ξεχωριστό αρχείο css, είτε στο head.

σώμα (
γραμματοσειρά-οικογένεια:verdana;
μέγεθος γραμματοσειράς: 15 px;
}
.σύνδεσμος (color:#fff; text-decoration:none)
.link:hover (χρώμα:#fff; κείμενο-διακόσμηση:υπογράμμιση)
#μάσκα (
θέση:απόλυτη;
αριστερά: 0;
κορυφή:0;
z-index:9000;
background-color:#000;
οθόνη: κανένας;
}
#boxes.window (
θέση:απόλυτη;
αριστερά: 0;
top:0px;
-κορυφή: 40 px;
πλάτος: 440 px;
ύψος: 200 px;
οθόνη: κανένας;
z-index:9999;
padding: 20px;
υπερχείλιση: κρυφό;
}
#boxes #dialog (
πλάτος: 375 px;
ύψος:203px;
padding:10px;
background-color:#ffffff;
}
.μπλουζα(
θέση:απόλυτη;
αριστερά: 0;
κορυφή:0;
πλάτος: 370 px;
ύψος: 30 px;
φόντο: #0085cc;
padding: 8px 20px 6px 10px;
}
.Κλείσε(
float:right;
}
.περιεχόμενο(
padding-top: 35px;
}

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

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

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

Κωδικός jQuery

$(document).ready(function() (
$("a").click(function(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("αριστερά", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) (
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(function () (
$(this).hide();
$(".window").hide();
});
});