Κώδικας

Τεχνικές για τη δημιουργία Windows Modal

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

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

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

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

Θεωρία τρόπων

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

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

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

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

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

Τώρα, δεν αρνούμαι να αναγκάζομαι τους χρήστες να κάνουν τίποτα, αλλά η απαλή ώθηση τους είναι απολύτως ωραία - και αυτό είναι αυτό που εννοούσα με "υποχρεωμένο". Έτσι, τι θα μπορούσατε να κάνετε είναι ένας σύνδεσμος σύνδεσης που τραβάει ένα παράθυρο τροχιάς με τη φόρμα σύνδεσης ακριβώς εκεί πάνω. Με αυτόν τον τρόπο δεν πρέπει ποτέ να απομακρυνθούν από την αρχική σελίδα και στη συνέχεια να πλοηγηθούν πίσω (μέσω του παραδείγματος που δηλώσαμε πριν από λίγο), και είναι επίσης 100% συνειδητοί για το τι πρέπει να κάνουν μέσα στο modal.

Είναι ένας πολύ καλός τρόπος να βοηθήσετε τους χρήστες να καταλάβουν τι συμβαίνει και γιατί συμβαίνει. Πρέπει να πω ότι έχω χρησιμοποιήσει τον εαυτό μου για τους πελάτες και το ποσοστό διατήρησης από την προσπέλαση αρχικής σελίδας έως τη σύνδεση έχει αυξηθεί κατά 35% στο παρελθόν που έχω δει. Και αυτοί σίγουρα δεν είναι αριθμοί για να κουνήσουν ένα ραβδί στο? είναι πραγματικά πολύτιμες και σαφώς καθορισμένες μετρήσεις για το πόσο ένα απλό παράθυρο μπορεί να αυξήσει τη συγκράτηση και τη μείωση του ποσοστού εγκατάλειψης.

Κωδικοποίηση βασικού παραθύρου τρόπου

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

Τα στοιχεία HTML

Υπάρχουν δύο βασικά στοιχεία που χρειαζόμαστε, μια σύνδεση για να ανοίξουμε το παράθυρο και το ίδιο το παράθυρο. Ο σύνδεσμος θα μοιάζει με αυτό:

Στη συνέχεια, πρέπει να προσθέσουμε ένα δεύτερο παράθυρο:

Παρατηρήστε ότι και τα δύο παράθυρα διανέμονται από το div με το id mode. Σημειώστε επίσης ότι η ταυτότητα του πρώτου παραθύρου τροπικού τύπου ταιριάζει με το href του πρώτου συνδέσμου και ότι η ταυτότητα του δεύτερου μεταθετικού παραθύρου ταιριάζει με το href του δεύτερου συνδέσμου. έτσι οι σύνδεσμοι θα στοχεύσουν το σωστό παράθυρο μόλις φτάσουμε στο jQuery.

Τα στοιχεία CSS

Πρέπει να στυλίσουμε τρία στοιχεία των τροποποιημένων παραθύρων μας, θα ξεκινήσουμε με το απλούστερο: 

#modal .contents{/* style the modal's contents, in this case we're just adding padding */padding:24px;}

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

Στη συνέχεια, πρόκειται να στυλίσουμε τους τυφλούς. 'Ωρα, κρατήστε το. Τι είναι τυφλός; Ακούω να κλάψεις. Είναι πολύ απλό: ένας τυφλός είναι το αντίθετο μιας μάσκας, θα το χρησιμοποιήσουμε για να αποκλείσουμε την υπόλοιπη σελίδα μας, ενώ το παράθυρο θα είναι ορατό. Και όχι, δεν το δημιουργήσαμε στο markup μας, το jQuery θα το κάνει αυτό για εμάς. Προς το παρόν, πρέπει απλώς να προσφέρουμε ένα στυλ για αυτό ώστε να καλύπτει όλο το περιεχόμενο του παραθύρου και το πιο σημαντικό, κάθεται πάνω από το υπόλοιπο περιεχόμενο στον άξονα z. 

#blind{/* position element so the z-index can be set */position:absolute;/* set z-index so the blind will cover all page content */z-index:9999;/* set the top, left, width and height so the blind covers the browser window */top:0;left:0;width:100%;height:100%;/* set the background to a suitably dark tone */background-color:#000000;}

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

Στη συνέχεια, πρέπει να ρυθμίσουμε το αριστερό περιθώριο στο μισό του πλάτους πολλαπλασιασμένο επί -1 (400/2 * -1 = -200) και το άνω περιθώριο κατά το ήμισυ του ύψους πολλαπλασιασμένο επί -1 (248/2 * -1 = -124). Αργότερα θα χρησιμοποιήσουμε το jQuery για να τοποθετήσουμε το στοιχείο στην κορυφή: 50% και αριστερά: 50%, λόγω αυτών των αρνητικών περιθωρίων το παράθυρο θα φαίνεται να είναι κεντραρισμένο ανεξάρτητα από τις διαστάσεις του προγράμματος περιήγησης και δεν θα χρειαστεί να προσπαθήσουμε και τοποθετήστε το βάσει του μεγέθους του προγράμματος περιήγησης.

Στη συνέχεια, πρέπει να ορίσουμε τις ιδιότητες αριστερά και επάνω σε -1000p. Γιατί θα θέλαμε να το κάνουμε αυτό; Λοιπόν, δεν θέλουμε να είναι ορατό το παράθυρο τροχιάς μέχρι να γίνει κλικ στο σύνδεσμο. Μια άλλη κοινή τεχνική είναι να ορίσετε την εμφάνιση: κανένας στο CSS αλλά πρόσφατα που έχει αρχίσει να κακοποιείται από τους spammers και μπορεί τώρα να επισημανθεί από τις μηχανές αναζήτησης ως τεχνική μαύρης καπέλου, ειδικά αν έχετε πολλές λέξεις-κλειδιά στο modal σας. Με το να το τοποθετήσουμε σε θέση μακριά από την οθόνη αντ 'αυτού, θα επιτύχουμε το ίδιο πράγμα.

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

Και μόνο για καλό μέτρο, γιατί να μην βυθιστείτε στο CSS3 και να πετάξετε σε μια σκιά κουτιού για να το κάνετε πραγματικά έξω από την οθόνη - δεν είναι κρίσιμη για την αποστολή και θα αγνοηθεί εάν δεν υποστηρίζεται. 

#modal .window {/* position the element so that the z-index can be applied */position:absolute;/* Set the z-index to a number higher than the blind's z-index */z-index:10000;/* set the width and height of the window */width:400px;height:248px;/* give the window negative margins that match the width/2 and height/2 so it is centered */margin-left:-200px;margin-top:-124px;/* position the top left corner off stage so it can't be seen (instead of display:none;) */left:-1000px;top:-1000px;/* color the background so it shows up */background-color:#ffffff;/* throw on a CSS3 box shadow, because it's cool, and we can */box-shadow:4px 4px 80px #000;-webkit-box-shadow:4px 4px 80px #000;-moz-box-shadow:4px 4px 80px #000;}

Το jQuery

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

Πρώτα πρέπει να εκτελέσουμε το σενάριο μόνο όταν το έγγραφο είναι έτοιμο 

$(document).ready(function(){

Στη συνέχεια, ορίστε μια μεταβλητή για να κρατήσετε μια αναφορά στο παράθυρο 

var activeWindow;

Στη συνέχεια, προσθέστε ένα πρόγραμμα χειρισμού κλικ στους συνδέσμους, η λειτουργία αυτή θα αποτρέψει την προεπιλεγμένη συμπεριφορά σύνδεσης. προσδιορίστε το αντίστοιχο παράθυρο από το χαρακτηριστικό href του συνδέσμου. να το ορίσετε στη μεταβλητή ενεργούWindow. Μετακινήστε το παράθυρο στο κέντρο του προγράμματος περιήγησης (θυμηθείτε τα αρνητικά περιθώρια στο CSS; Αυτά είναι τα σημεία όπου δουλεύουν τη μαγεία τους επειδή το μόνο που χρειάζεται να ρυθμίσουμε είναι το 50% για να φτάσουμε στο κέντρο) δημιουργήστε ένα νέο διαζύγιο με το id 'blind', ξεθωριάστε αυτό και συνδέστε το δικό του χειριστή κλικ που θα καλέσει τη λειτουργία closeModal (). 

$('a.modalLink').click(function(e){e.preventDefault();var id = $(this).attr('href');activeWindow = $('.window#' + id).css('opacity', '0').css('top', '50%').css('left', '50%').fadeTo(500, 1);$('#modal').append('
').find('#blind').css('opacity', '0').fadeTo(500, 0.8).click(function(e){closeModal();});});

Στη συνέχεια πρέπει να προσθέσετε ένα χειριστήριο κλικ στα κουμπιά κλεισίματος για να καλέσετε την ίδια λειτουργία closeModal () με το κλικ στο blind. 

$('a.close').click(function(e){e.preventDefault();closeModal();});

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

function closeModal() {activeWindow.fadeOut(250, function(){ $(this).css('top', '-1000px').css('left', '-1000px'); });$('#blind').fadeOut(250,    function(){ $(this).remove(); });}

Μην ξεχάσετε να κλείσετε το $ (document) .ready handler! 

});

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

// run when page is ready$(document).ready(function(){// create variable to hold the current modal windowvar activeWindow;$('a.modalLink').click(function(e){// cancel the default link behavioure.preventDefault();// find the href of the link that was clicked to use as an idvar id = $(this).attr('href');// assign the window with matching id to the activeWindow variable, move it to the center of the screen and fade inactiveWindow = $('.window#' + id).css('opacity', '0') // set to an initial 0 opacity.css('top', '50%') // position vertically at 50%.css('left', '50%') // position horizontally at 50%.fadeTo(500, 1); // fade to an opacity of 1 (100%) over 500 milliseconds// create blind and fade in$('#modal').append('
') // create a 
 with an id of 'blind'.find('#blind') // select the div we've just created.css('opacity', '0') // set the initial opacity to 0.fadeTo(500, 0.8) // fade in to an opacity of 0.8 (80%) over 500 milliseconds.click(function(e){closeModal(); // close modal if someone clicks anywhere on the blind (outside of the window)});});$('a.close').click(function(e){// cancel default behavioure.preventDefault();// call the closeModal function passing this close button's windowcloseModal();});function closeModal(){// fade out window and then move back to off screen when fade completesactiveWindow.fadeOut(250, function(){ $(this).css('top', '-1000px').css('left', '-1000px'); });// fade out blind and then remove it$('#blind').fadeOut(250,    function(){ $(this).remove(); });}});

Το κλειδί αυτής της διαδικασίας είναι να διαχωρίσει το παράθυρο τροπικού σε τρία στοιχεία: δεδομένα (HTML), στυλ (CSS) και λειτουργικότητα (jQuery). Υπάρχουν χιλιάδες παραλλαγές που μπορείτε να χρησιμοποιήσετε για να βασιστείτε σε αυτή την τεχνική πυρήνα και θα θέλαμε να διαβάσετε για μερικές από τις εμπειρίες σας στα σχόλια παρακάτω.

Ποια είναι τα καλύτερα παραδείγματα παραθύρων τρόπων που έχετε δει; Ποια είναι η αγαπημένη σας τεχνική για τη δημιουργία τους; Ενημερώστε μας στα σχόλια!

css κωδικοποίηση jquery html modal windows