Δημιουργία παραθύρου pop-up στην Javascript
Η χρησιμοποίηση παραθύρων pop-up σε μία ιστοσελίδα συνήθως είναι κάτι πολύ ενοχλητικό για τους επισκέπτες της.Ωστόσο αν χρησιμοποιηθούν σωστά μπορούν να βοηθήσουν τον επισκέπτη στο να έχει ένα καλύτερο browsing στο site.
Πάμε να δούμε λοιπόν βήμα προς βήμα πως θα δημιουργήσουμε ένα παράθυρο pop-up στην Javascript.
1)Ξεκινάμε εισάγωντας στο body της html το
<a>
2)Ορίζουμε μέσα στην ετικέτα <a> την ιδιότητα href και τις δίνουμε την τιμή #
<a href=”#”>
3)Μετά την ιδιότητα href εισάγουμε το onClick event.
<a href=”#” onClick>
4)Ορίζουμε ότι στο onClick event θα ανοίγει ένα νέο παράθυρο με το window.open ()
<a href=”#” onClick=”window.open ()”>
5)Τώρα μέσα στην παρένθεση εισάγουμε το όνομα του αρχείου που θέλουμε να εμφανίζεται στο pop-up παράθυρο μέσα σε μονά αυτάκια (quotes).
<a href=”#” onClick=”window.open (‘datalibrary.html’)”>
6)Εισάγουμε ένα κόμμα , (μετά το datalibrary.html) και βάζουμε το όνομα που θα έχει το παράθυρο popup.
<a href=”#” onClick=”window.open (‘datalibrary.html’, ‘datalibrary’)”>
7)Τώρα εισάγουμε ακόμα ένα κόμμα και ορίζουμε τις ιδιότητες του παραθύρου όπως πλάτος και ύψος τα οποία θα πρέπει να είναι μέσα σε μονά αυτάκια και με κόμμα ανάμεσα.
<a href=”#” onClick=”window.open (‘datalibrary.html’, ‘datalibrary’, ‘width=300, height=200’)”>
8)Πριν κλείσουμε το <a> μπορούμε να εισάγουμε μία εικόνα ή ένα κείμενο που όταν θα κάνει κλικ ο επισκέπτης πάνω του θα ανοίγει το pop-up παράθυρο.
<a href=”#” onClick=”window.open (‘datalibrary.html’, ‘datalibrary’, ‘width=300, height=200’)”> Datalibrary!Το blog της γνώσης πάνω στους υπολογιστές… </a>
Κώδικας:
<html>
<head>
<title>Datalibrary Pop-up</title>
</head>
<body>
<a href=»#» onClick=»window.open(‘datalibrary.html’, ‘datalibrary’,
‘width=300, height=200’)»> Datalibrary!Το blog της γνώσης πάνω στους υπολογιστές…< /a>
</body>
</html>
Αποτέλεσμα στον browser:
Παράθυρο popup
ΗΛΕΚΤΡΟΝΙΚΗ ΒΙΒΛΙΟΘΗΚΗ ΔΕΔΟΜΕΝΩΝ 
20 Σεπτεμβρίου, 2009 στις 05:06
Μόνο που την σήμερον σχεδόν κανένας δεν θέλει η δεν επιτρέπει το άνοιγμα των PopUps, βάζοντας όλοι μας τις ανάλογες ρυθμίσεις στους Browser για την καταστολή τους.
Καλό σαν άρθρο, έχει σίγουρα την αξία του, μα outdated θα έλεγα για τα σημερινά δεδομένα. Συμφωνείτε;
φιλικά,
και για το Α! μπε μπα Blog! Το μπινελικοδρόμιο..
Νίκος Ράμμος (AATON)
20 Σεπτεμβρίου, 2009 στις 10:31
Θα διαφωνήσω ως προς το out of date του άρθρου καθώς ναι μεν συνήθως τα popup θέλουμε να τα καταπολέμησουμε ειδικά αυτά που προέρχονται από κακόβουλα sites αλλά παρότι πλέον έχουμε τόσα software για popup blocker υπάρχουν αρκετές φορές που τουλάχιστον σε μένα προσωπικά έχει χρειαστεί να το επιτρέψω και αυτό γιατί πολλές ιστοσελίδες χρησιμοποιούν popup.
Δεν μιλάω βέβαια να δημιουργήσουμε 100 popup στον browser του κάθε χρήστη αλλά από πλευράς javascript αν δουλεύουμε μπορεί κάποια στιγμή να μας φανεί χρήσιμο.
25 Σεπτεμβρίου, 2009 στις 04:07
Το Out of date δεν το είπα για να μειώσω ούτε κατ’ ελάχιστο την αξία της ανάρτησης η οποία έχει σίγουρα την σημασία και την λειτουργική της χρήση. Είναι αυτό που ανέφερες στο τέλος, ο φόβος του ότι πολλές φορές δεν γνωρίζουμε απο πρίν αν η σελίδα που επισκεπτόμαστε είναι η όχι κακόβουλη.
Ευχαριστώ για την απάντηση.