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

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


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



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


Οδηγίες


1


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


2


Στην ενότητα του εγγράφου, δημιουργήστε ένα στρώμα που θα χειριστεί το jQuery: <div id = "show" class = "show">


3


Στη συνέχεια, πρέπει να καθορίσετε το όνομα του αναδυόμενου παραθύρου. Για να γίνει αυτό, μπορείτε να χρησιμοποιήσετε τις κεφαλίδες HTML σε στρώσεις: <h3> Τίτλος παραθύρου </ h3>


4


Στη συνέχεια, καθορίστε το κείμενο που θα εμφανιστεί στο παράθυρο χρησιμοποιώντας τη δέσμη ενεργειών για να δημιουργήσετε την παράγραφο: <div> <p> Κείμενο </ p>


5


Στη συνέχεια, δημιουργήστε μια τάξη στρώμα close_win για να κλείσετε το pop-up, πριν να κλείσει την προηγούμενη Περιγραφέας: </ div> <a class = "close_win"> Κλείσιμο παραθύρου</a>


6


Συνδέστε τη βιβλιοθήκη jQuery στο αρχείο γράφοντας την επιθυμητή ετικέτα ανάμεσα στους περιγραφείς εγγράφων. Για παράδειγμα: <head> <script </ script>


7


Στη συνέχεια, πληκτρολογήστε τον κωδικό για να εμφανιστεί το αναδυόμενο παράθυρο: <script> $ (function () {$ ('# show').


8


Στη συνέχεια, πρέπει να χειριστείτε το συμβάν κλικο χρήστης του κουμπιού του ποντικιού για να καλέσει το αναδυόμενο παράθυρο και να επεξεργαστεί το κλείσιμο του παραθύρου. Για να το κάνετε αυτό, πληκτρολογήστε τον ακόλουθο κώδικα: $ ('# click-me') Κάντε κλικ (function () {$ ('# show') Fadein (300) {$ show ') fadeOut (300);}) & lt; script>}) Το πρόγραμμα αυτό επεξεργάζεται το χρήστη κάνοντας κλικ στο αναδυόμενο κουμπί και κάνοντας κλικ στο σύνδεσμο για να το κλείσει.


9


Για να εμφανίσετε ένα αναδυόμενο παράθυρο σε μια σελίδα, εσείςΜπορείτε να χρησιμοποιήσετε την αναφορά κλάσης click-me, η οποία καθορίστηκε στον παραπάνω κώδικα. Για να το κάνετε αυτό, πληκτρολογήστε τον ακόλουθο κώδικα στο σώμα του εγγράφου: <a class = "click-me"> Κάντε κλικ για να εμφανιστεί ένα αναδυόμενο παράθυρο </a>