Τα αναδυόμενα παράθυρα για μεγάλη ποικιλία σκοπών έχουν πολλές χρήσεις στην κατασκευή ιστοσελίδων. Μπορούν να χρησιμοποιηθούν για τη δημιουργία διαφόρων ειδών μενού, την τοποθέτηση διαφημιστικών κειμένων και γραφικών, συμβουλές εργαλείων κατά τη συμπλήρωση σύνθετων φορμών και είναι βολικό να τοποθετούνται οι ίδιες οι φόρμες σε παράθυρα που δεν καταλαμβάνουν χώρο στη σελίδα. Στο άρθρο μας θα βρείτε μια περιγραφή του πώς μπορείτε να δημιουργήσετε ένα τέτοιο παράθυρο.
Είναι απαραίτητο
Βασικές γνώσεις HTML
Οδηγίες
Βήμα 1
αναδυόμενο παράθυρο, html, κρυφό επίπεδο
Βήμα 2
Σε πολλές σελίδες στον ιστό, μπορείτε να δείτε ότι οι φανταστικές βιβλιοθήκες διαφόρων πλαισίων JavaScript (jQuery, MooTools, Prototype κ.λπ.) χρησιμοποιούνται για τη δημιουργία αναδυόμενων παραθύρων στις σελίδες. Ωστόσο, στην πραγματικότητα, δεν είναι απαραίτητα κατά την επίλυση αυτού του συγκεκριμένου προβλήματος. Τα εργαλεία που διατίθενται σε Hypertext Markup Language (HTML) και Cascading Style Sheets (CSS) είναι επαρκή για τη δημιουργία αναδυόμενων παραθύρων. Τα παράθυρα που δημιουργήθηκαν με αυτόν τον τρόπο θα λειτουργήσουν ανεξάρτητα από το αν η JavaScript είναι ενεργοποιημένη στο πρόγραμμα περιήγησης του επισκέπτη.
Όλος ο κωδικός που δημιουργεί το αναδυόμενο παράθυρο μπορεί να τοποθετηθεί σε δύο γραμμές. Η πρώτη γραμμή δημιουργεί έναν σύνδεσμο στον οποίο πρέπει να κάνετε κλικ για να εμφανιστεί το αναδυόμενο παράθυρο:
Κάντε κλικ ΕΔΩ!
Εδώ, το χαρακτηριστικό onmouseover της ετικέτας συνδέσμου ορίζει τον προεπιλεγμένο τύπο δρομέα ποντικιού για συνδέσμους. Το χαρακτηριστικό onclick καθορίζει ότι όταν κάνετε κλικ στον σύνδεσμο, το κρυφό μπλοκ PopUp θα πρέπει να γίνει ορατό.
Η δεύτερη γραμμή είναι, στην πραγματικότητα, το αναδυόμενο παράθυρο. Επίπεδο με το αναγνωριστικό PopUp και το μέγεθος του παραθύρου, το χρώμα και το μέγεθος του κειμένου, το φόντο και το περίγραμμα που καθορίζονται στο χαρακτηριστικό στυλ:
Αυτό είναι το κείμενο στο αναδυόμενο παράθυρο
Δεν είναι ορατό από προεπιλογή - αυτό υποδεικνύεται από τον επιλογέα οθόνης με καμία τιμή στην περιγραφή στυλ επιπέδου.
Στην πραγματικότητα, αυτό είναι το μόνο που χρειάζεστε για να δημιουργήσετε ένα αναδυόμενο παράθυρο - τοποθετήστε αυτές τις δύο γραμμές μεταξύ των ετικετών και της σελίδας σας και είναι έτοιμο να ξεκινήσει.
Βήμα 3
Για να μπορέσετε να κλείσετε το αναδυόμενο παράθυρο μπροστά από την ετικέτα, πρέπει να προσθέσετε έναν σύνδεσμο που εκτελεί την αντίθετη ενέργεια - κρύβοντας το ορατό επίπεδο με το αναγνωριστικό PopUp:
Κλείσε
Βήμα 4
Και αν θέλετε το παράθυρο να εμφανιστεί όχι κάνοντας κλικ, αλλά τοποθετώντας το δείκτη του ποντικιού, τότε η πρώτη γραμμή με το σύνδεσμο πρέπει να τροποποιηθεί με αυτόν τον τρόπο:
μετακινήστε το ποντίκι εδώ!
Βήμα 5
Τώρα είστε εξοικειωμένοι με την αρχή και τη δομή του αναδυόμενου κώδικα παραθύρου και ο σχεδιασμός της εμφάνισης και του περιεχομένου του εξαρτάται εξ ολοκλήρου από τους στόχους και τη φαντασία σας.
