Η δημιουργία ενός αναδυόμενου παραθύρου σε HTML γίνεται χρησιμοποιώντας τη βιβλιοθήκη jQuery, η οποία σας επιτρέπει να ενσωματώσετε ένα πρόγραμμα χειρισμού συμβάντων σε μια ιστοσελίδα και έτσι να καταστήσετε δυνατή την εμφάνιση του ενεργού περιεχομένου του ιστότοπου.
Οδηγίες
Βήμα 1
Ανοίξτε τη σελίδα του ιστότοπού σας HTML στο πρόγραμμα επεξεργασίας κειμένου που χρησιμοποιείτε για να γράψετε τον κώδικα που θέλετε. Μπορείτε επίσης να χρησιμοποιήσετε το τυπικό βοηθητικό πρόγραμμα Windows Notepad για να εισαγάγετε ένα αναδυόμενο παράθυρο. Για να το κάνετε αυτό, κάντε δεξί κλικ στο αρχείο HTML και επιλέξτε "Άνοιγμα με" - "Σημειωματάριο".
Βήμα 2
Στην ενότητα εγγράφων, δημιουργήστε ένα επίπεδο που θα χειριστεί το jQuery:
Βήμα 3
Στη συνέχεια, πρέπει να ορίσετε το όνομα του αναδυόμενου παραθύρου. Για να το κάνετε αυτό, μπορείτε να χρησιμοποιήσετε τις επικεφαλίδες επικεφαλίδας HTML:
Τίτλος παραθύρου
Βήμα 4
Μετά από αυτό, ορίστε το κείμενο που θα εμφανίζεται στο παράθυρο χρησιμοποιώντας το σενάριο για να δημιουργήσετε μια παράγραφο:
Κείμενο
Βήμα 5
Στη συνέχεια, δημιουργήστε ένα επίπεδο με την τάξη close_win για να κλείσετε το αναδυόμενο παράθυρο, προτού κλείσετε την προηγούμενη λαβή:
Κλείστε ένα παράθυρο
Βήμα 6
Συμπεριλάβετε τη βιβλιοθήκη jQuery στο αρχείο προσθέτοντας την απαιτούμενη ετικέτα μεταξύ των περιγραφικών εγγράφων. Για παράδειγμα:
Βήμα 7
Μετά από αυτό, εισαγάγετε τον κωδικό για να εμφανιστεί το αναδυόμενο παράθυρο:
$ (συνάρτηση () {
$ ('# Show'). Απόκρυψη ();
Βήμα 8
Στη συνέχεια, πρέπει να χειριστείτε το συμβάν που ο χρήστης πιέζει το κουμπί του ποντικιού για να καλέσει το αναδυόμενο παράθυρο και να χειριστεί το κλείσιμο του παραθύρου. Για να το κάνετε αυτό, εισαγάγετε τον ακόλουθο κωδικό:
$ (‘# Click-me’). Κάντε κλικ στο (λειτουργία () {$ (‘# show’). Fadein (300);})
$ (‘# Close_win’). Κάντε κλικ στο (λειτουργία () {$ (‘# show’). FadeOut (300);})
& lt / script>})
Αυτό το πρόγραμμα χειρίζεται τον χρήστη πατώντας τα κουμπιά για να καλέσετε το αναδυόμενο παράθυρο και κάνοντας κλικ στον σύνδεσμο για να το κλείσετε.
Βήμα 9
Για να εμφανιστεί το αναδυόμενο παράθυρο στη σελίδα, μπορείτε να χρησιμοποιήσετε το σύνδεσμο της κλάσης click-me που καθορίστηκε στον παραπάνω κώδικα. Για να το κάνετε αυτό, εισαγάγετε τον ακόλουθο κωδικό στο σώμα του εγγράφου:
Κάντε κλικ για να εμφανιστεί το αναδυόμενο παράθυρο
