Τι είναι ένα αναδυόμενο παράθυρο και πώς να το δημιουργήσετε μόνοι σας. Δημιουργούμε το δικό μας αναδυόμενο παράθυρο χρησιμοποιώντας javascript, css και jQuery. Ποια μέθοδο να επιλέξετε

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

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

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

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

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

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

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

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

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

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

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

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

Κωδικός 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();
});
});

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

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

Τα HTML5 και CSS3 καθιστούν απίστευτα εύκολη τη δημιουργία modal windows.

Σήμανση HTML

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

Άνοιγμα παραθύρου modal

Μέσα σε ένα στοιχείο div Τοποθετούνται τα περιεχόμενα του παραθύρου modal. Πρέπει επίσης να δώσετε έναν σύνδεσμο για να κλείσετε το παράθυρο. Για παράδειγμα, ας τοποθετήσουμε έναν απλό τίτλο και αρκετές παραγράφους. Η πλήρης σήμανση για το παράδειγμά μας θα μοιάζει με αυτό:

Άνοιγμα παραθύρου modal X Παράθυρο modal

Ένα παράδειγμα απλού παραθύρου που μπορεί να δημιουργηθεί χρησιμοποιώντας CSS3.

Μπορεί να χρησιμοποιηθεί σε ένα ευρύ φάσμα, από την εμφάνιση μηνυμάτων μέχρι την εγγραφή φορμών.

Στυλ

Δημιουργήστε μια τάξη modalDialogκαι αρχίζουν να διαμορφώνουν την εμφάνιση:

ModalDialog ( θέση: σταθερό; γραμματοσειρά-οικογένεια: Arial, Helvetica, sans-serif; επάνω: 0; δεξιά: 0; κάτω: 0; αριστερά: 0; φόντο: rgba(0,0,0,0,8); z-index : 99999 -webkit-transition: αδιαφάνεια 400ms ease-in: αδιαφάνεια 400ms ease-in;

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

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

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

Ίσως δεν γνωρίζετε το ακίνητο δείκτες-γεγονότα, αλλά σας επιτρέπει να ελέγχετε πώς θα αντιδρούν τα στοιχεία στα κλικ του ποντικιού. Ορίζουμε την τιμή στην τιμή της για την κλάση modalDialog, καθώς ο σύνδεσμος δεν πρέπει να ανταποκρίνεται στα κλικ του ποντικιού όταν είναι ενεργή η ψευδοκλάση ":στόχος".

Τώρα προσθέτουμε μια ψευδοκλάση :στόχοςκαι στυλ για το τροπικό παράθυρο.

ModalDialog:target ( display: block; pointer-events: auto; ) .modalDialog > div ( πλάτος: 400px; θέση: σχετικό; περιθώριο: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: # Φόντο: -moz-linear-gradient(#fff, #999); )

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

Ορίζουμε το πλάτος του παραθύρου και τη θέση του στη σελίδα. Ορίζουμε επίσης μια κλίση για το φόντο και τις στρογγυλεμένες γωνίες.

Κλείσιμο του παραθύρου

Τώρα πρέπει να εφαρμόσουμε τη λειτουργία κλεισίματος παραθύρου. Σχηματίζοντας την εμφάνιση του κουμπιού:

Κλείσιμο ( φόντο: #606061; χρώμα: #FFFFFF; ύψος γραμμής: 25 εικονοστοιχεία; θέση: απόλυτη; δεξιά: -12 εικονοστοιχεία; στοίχιση κειμένου: κέντρο; επάνω: -10 εικονοστοιχεία; πλάτος: 24 εικονοστοιχεία; διακόσμηση κειμένου: κανένα; γραμματοσειρά- βάρος: -webkit-radius: 12px-border-radius: 1px 3px #000; :hover ( φόντο: #00d9ff; )

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

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

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

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

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

Όλες οι ενέργειες και τα κινούμενα σχέδια είναι γραμμένα σε κώδικα javascript χρησιμοποιώντας τη βιβλιοθήκη jquery. Για να ξεχωρίσετε τα μπλοκ μεταξύ τους, προστίθενται ετικέτες id="" και class="" στις ετικέτες που θα τους εκχωρηθούν στο φύλλο στυλ. Το μπλοκ μπορεί να κληθεί μέσω συνδέσμου, όταν κάνετε κλικ σε ένα κουμπί ή όταν η σελίδα φορτώνεται για πρώτη φορά. Αυτές οι ενέργειες προγραμματίζονται σε javascript χρησιμοποιώντας μια πηγή συμβάντος κλικ ή onclick.

Για να αποφύγετε τυχόν ερωτήσεις σχετικά με τις συντομογραφίες στο μέλλον:

• jq-jquery;
• Js - javascript.

Συνολικά, το υλικό θα εξετάσει 4 παραδείγματα χρησιμοποιώντας διαφορετικές μεθόδους, συμπεριλαμβανομένης της χρήσης της ενσωματωμένης συνάρτησης διεπαφής διαλόγου στο jq. Υπάρχουν επίσης 2 επιλογές σε καθαρό javavscript και html.

Γραφικό στοιχείο αναδυόμενου παραθύρου για Wordpress

Δεν θέλουν όλοι οι ιδιοκτήτες ιστολογίων ή καταστημάτων να ασχολούνται με διάφορους κώδικες javascript. Για δημοφιλή CMS όπως wordpress, joomla, opencard κ.λπ., υπάρχουν ενσωματωμένα πρόσθετα.

Τα πιο δημοφιλή πρόσθετα WordPress για τη δημιουργία αναδυόμενου παραθύρου:

• Αναδυόμενη φόρμα επικοινωνίας.
• Αναδυόμενο παράθυρο Ninja;
• Easy Modal;
• Προσθήκη προωθήσεων.
• Απόλυτα αναδυόμενα παράθυρα.

Για το Joomla:

• JCE MediaBox;
• Απλό αναδυόμενο παράθυρο

Υπάρχουν πολλά περισσότερα παρόμοια ανάλογα, αλλά όλα εκτελούν την ίδια λειτουργία. Μόνο ο σχεδιασμός του μενού στο οποίο εργάζεται ο χρήστης διαφέρει.

Πώς να δημιουργήσετε ένα αναδυόμενο παράθυρο html με διαφορετικά στυλ

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

Αναδυόμενο παράθυρο κατά την είσοδο στον ιστότοπο

Αρχικά, είναι καλύτερο να εξετάσετε ένα παράδειγμα χρησιμοποιώντας html και javascript. Πρώτα πρέπει να συνδέσετε τη βιβλιοθήκη jq στη σελίδα. Για να το κάνετε αυτό, χρησιμοποιήστε την εντολή "command 1". Πρέπει να εισαχθεί στην αρχή του αρχείου εάν δεν συνδεθείτε στη βιβλιοθήκη, τότε τα απαραίτητα fadeIn, fadeOut κ.λπ.

Αρχικά δημιουργείται μια δομή σελίδας με ετικέτα, η οποία αποτελείται κυρίως από μπλοκ div. Στο παραπάνω παράδειγμα, η javascript εμφανίζει πληροφορίες από διαφορετικά αντικείμενα, ώστε να μπορείτε να εισάγετε ένα δεύτερο div δίνοντάς του την παράμετρο iddiv= "box_" μετά την υπογράμμιση, υποδεικνύεται ένας μοναδικός αριθμός.