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

Πώς να κάνετε ένα αναδυόμενο παράθυρο (pop-up) παράθυρο - μια ερώτηση που ενθουσιάζει το μυαλό οποιουδήποτε νεαρού προγραμματιστή αρχάριων. Και σήμερα θα εξετάσουμε πώς να φτιάξουμε αυτό το αναδυόμενο παράθυρο. Αμέσως τρέχω, γιατί αυτό που θα κάνουμε είναι πραγματικά πολύ και πολύ ενδιαφέρουσα και λειτουργική.

Έτσι, θα κάνουμε ένα παρόμοιο παράθυρο που εφαρμόσαμε στο χώρο ενός από τους πελάτες μου. Μπορείς να δεις. Το τεράστιο πλεονέκτημα αυτής της μεθόδου δημιουργίας ενός τέτοιου παραθύρου είναι ότι δεν θα χρησιμοποιήσουμε το JavaScript και θα περιορίσουμε αποκλειστικά τον αγαπημένο μου CSS3 και HTML5. Αυτό πάρα πολύ θα σκοτώσουμε αρκετούς λαγούς ταυτόχρονα. Πρώτον, διευκολύνετε τη λήψη του ιστότοπού μας, δεύτερον, πουλάμε τα πάντα σε μια βολική και εύκολη μορφή με ελάχιστη χρήση του κώδικα, η οποία θα σας επιτρέψει να δώσετε ανεξάρτητα το παράθυρο αναδυόμενου παραθύρου σας τυχόν διαστάσεις, χρώματα, φόρμες. Νομίζω ότι είναι υπέροχο. Έτσι, προχωρήστε.

Φανταστείτε ότι έχετε ήδη έναν ιστότοπο και θέλετε να ενσωματώσετε ένα κουμπί κάπου, για παράδειγμα, "Εγγραφή" ή "Online Application". Και θέλετε ο χρήστης κάνοντας κλικ σε αυτό το κουμπί, είδε ένα μικρό παράθυρο που σας επιτρέπει να εισάγετε μερικά δεδομένα σε αυτό και, στη συνέχεια, να τα στείλετε στο διαχειριστή του ιστότοπου. Εδώ είναι το παράθυρο που εμείς και θα κάνουμε τώρα.

Για να ξεκινήσετε, θα δημιουργήσουμε αυτό το κουμπί, νομίζω ότι θα κάνετε χωρίς μεγάλη δυσκολία. Αλλά στην ετικέτα Πρέπει να εισάγετε τα ακόλουθα #OPENModal . Έτσι πρέπει να κοιτάξει για σένα. Στη συνέχεια, μπροστά από την ετικέτα κλεισίματος

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

Τώρα πρέπει να το κάνουμε όμορφα και να το κάνουμε έτσι ώστε όλα να εργαστούν ανάλογα με τις ανάγκες. Ας αρχίσουμε να εκδίδουμε.

Εγγραφή

Modaldialog (θέση: σταθερή, font-οικογένεια: arial, helvetica, sans-serif; κορυφή: 0; δεξιά: 0; κάτω: 0; αριστερά: 0; φόντο: RGBA (0,0,0,0,8) -IndEx: 99999; -Webkit-μετάβαση: αδιαφάνεια 400ms ευκολία-in; -moz-μετάβαση: αδιαφάνεια 400ms ευκολία; μετάβαση: αδιαφάνεια 400ms Επαναφορά; Εμφάνιση: Κανένα;

Ο παραπάνω κώδικας είναι απλός στην ντροπή. Αλλά μόνο σε περίπτωση, δεδομένου ότι γνωρίζω ότι το blog μου διαβάζει αρκετά πολλούς νεοφερμένους να καταλάβουν πιθανές δυσκολίες. Στο παράθυρο ήταν πάντα σε ένα μέρος, ορίσαμε μια σταθερή θέση. Επίσης, το παράθυρο τεντωμένο σε πλήρη οθόνη θέλω τις συντεταγμένες των γωνιών στο σημείο 0. Για το πίσω φόντο, ένα μαύρο χρώμα είναι εγκατεστημένο και έχει προστεθεί διαφάνεια, επομένως επιτυγχάνεται η μείωση. modal παράθυρο. Στο παράθυρο πάνω από το υπόλοιπο της σελίδας, ένα μεγάλο z-δείκτη.. Για την ομαλή εμφάνιση και την εξαφάνιση του αγαπημένου μας παραθύρου Modal, και θα γίνει έτσι, πιστέψτε με, Μετάβαση.. Για να αποκρύψετε το παράθυρο για εγκατάσταση Απεικόνιση σε κανένας. Ιδιοκτησία Δείχνα-εκδηλώσεις. Σας επιτρέπει να ελέγχετε την αλληλεπίδραση (Clichelism) των στοιχείων.

Ανοίγοντας ένα αναδυόμενο παράθυρο

Κάναμε το σχεδιασμό του παραθύρου μας. Αλλά! Είναι, θα μου πείτε, δεν λειτουργεί. Ναι, απαντώ, είναι. Για τώρα το πιο ενδιαφέρον. Μια ψευδο-κλάση εμφανίστηκε στο CSS3 Στόχος, Πραγματικά ένα χρήσιμο πράγμα που δεν λένε. Και στο modal pop-up παράθυρο μας χωρίς αυτό καθόλου. Τι κάνει. Αυτή η ψευδοκλασιά, αν το καθορίσετε με κάποιο είδος στοιχείου που ορίζεται στο Γραμμή διεύθυνσης Ως αναγνωριστικό, στην περίπτωσή μας #Openmodal.Ότι οι ιδιότητες αυτής της ψευδοκόλης θα γίνουν πιο σημαντικές από το στοιχείο στόχο. Νομίζω ότι έχετε ήδη καταλάβει τι θέλω να κάνω.

Modaldialog: στόχος (οθόνη: μπλοκ, δείκτες, συμβάντα δείκτη: αυτόματη;) .modaldialog\u003e div (πλάτος: 400px; θέση: συγγενής · περιθώριο: 10% αυτόματη · padding: 5px 20px 13px 20px; Fff; φόντο: -moz-γραμμική-κλίση (#FFF, # 999); φόντο: -webkit-γραμμική-κλίση (# 999) φόντο: -ο-γραμμική-κλίση (#FFF, # 999); )

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

Κλείνοντας το παράθυρο Modal

Όταν ο σχεδιασμός του παραθύρου έχει καθοριστεί και ανοίγει, πρέπει να κάνετε το κουμπί κλεισίματος του παραθύρου - να το κανονίσετε και να εφαρμόσετε τη λειτουργικότητα. Η χρήση CSS3 και HTML5 σας επιτρέπει να δημιουργείτε κομψά μη τυποποιημένα κουμπιά χωρίς να χρησιμοποιήσετε την εικόνα:

Κλείσιμο (φόντο: # 606061; Χρώμα: #FFFFF, ύψος γραμμής: 25px, θέση: απόλυτη? Δεξιά: -12px; κείμενο-ευθυγράμμιση: Κέντρο; Κορυφή: Γραμματοσειρά: Κανένα; γραμματοσειρά- Βάρος: Bold · -Webkit-Border-Racius: 12px; -Moz-Bordius-Racius: 12px; συνοριακή ακτίνα: 12px; -moz-box-shadow: 1px 1px 3px # 000; -webkit-box-shadow: 1px 1px 3PX # 000; Σκιά κουτιού: 1px 1px 3px # 000;) .Close: Τοποθετήστε το πλήκτρο (Ιστορικό: # 00d9ff;)

Διάσημο γεγονός: Οι περισσότεροι επισκέπτες δεν κάνουν αγορές όταν επισκέπτεστε πρώτα τη σελίδα του ηλεκτρονικού καταστήματος και δεν αφήνετε καν το Lida - αλλά πόσο μεγάλη είναι η πλειοψηφία;

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

Τα παρακάτω στατιστικά στοιχεία θα είναι καλά νέα: το 75% των επισκεπτών εξακολουθούν να είναι έτοιμοι να επιστρέψουν αργότερα για να ολοκληρώσουν την αγορά.

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

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

Γιατί;

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

Αν μιλάμε για το περιεχόμενο και το μάρκετινγκ ηλεκτρονικού ταχυδρομείου, τότε η διακοπή "Pattern" είναι πιο αποτελεσματική όταν ο αναγνώστης έχει ήδη ρυθμιστεί για να λύσει το πρόβλημα και να συνεχίσει την αλληλεπίδραση (συνδρομή στο ενημερωτικό δελτίο, την αγορά κ.λπ.).

Παράδειγμα από την υπηρεσία MadeC.com. Οι έμποροι προσέφεραν στους επισκέπτες τους ένα ελεύθερο κουπόνι με ονομαστική αξία 10 ευρώ για μια ζωντανή διεύθυνση - διεύθυνση ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ. Έγινε επειδή:

1. Όλοι αγαπούν τα δώρα χρημάτων.
2. 10 ευρώ για συνεχή επαφή μέσω ηλεκτρονικού ταχυδρομείου - μικρή τιμή.

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

Ίσως τα αναδυόμενα παράθυρα δεν είναι τόσο άσχημα;

Πιθανότατα, μισείς τα pop-ups και το έχετε σωστά. Θα θέλατε να δείτε αμέσως μετά τη μετάβαση στην προσγείωση για να δείτε κάτι παρόμοιο:

Ή όπως:

Μπορεί να μην γνωρίζετε καν τις δραστηριότητες της εταιρείας και ήδη στο λαιμό που καλύπτεται με τα παράθυρα Pop Up. Παραδείγματα παραπάνω - Ανεπιτυχείς: Πρώτα απ 'όλα, ο επισκέπτης θέλει να μάθει περισσότερα για το εμπορικό σήμα και στη συνέχεια να κατεβάσει "δωρεάν οδηγός για τη δημιουργία της κυκλοφορίας", δωρεάν Ηλεκτρονικό βιβλίο"Και ούτω καθεξής, φυσικά, οι περισσότεροι χρήστες μισούν τέτοια πράγματα και ανταποκρίνονται στην άρνηση της επόμενης αλληλεπίδρασης με το εμπορικό σήμα.

Ίσως αξίζει να κρυώσει λίγο και να εξετάσει τα αποτελέσματα των δοκιμών. Τι λένε τα νούμερα? Εδώ είναι τα δεδομένα του Split Test Pop APA και τα κουμπιά "Όχι, σας ευχαριστώ" στην προσφορά Popup.

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

1. Εμπειρία χρησιμοποιώντας τα αναδυόμενα παράθυρα

Για μια κανονική ημέρα, η υπηρεσία WP αρχάριος λαμβάνει περίπου 70-80 νέους συνδρομητές χάρη στο Διάφορες μέθοδοι Lidenctration. Αλλά όσο περισσότερο η βάση συνδρομής, τόσο πιο επιτυχημένη επιχείρηση, έτσι ώστε οι έμποροι της υπηρεσίας αποφάσισαν πολλά πειράματα με αναδυόμενα παράθυρα.

Τι έγινε;

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

Ποια είναι τα αποτελέσματα;

Η χρήση ενός αναδυόμενου παραθύρου στις πιο σημαντικές σελίδες (όχι σε ολόκληρο τον ιστότοπο) έχει αυξηθεί ο αριθμός των καταχωρίσεων κατά 660%. Δηλαδή, από 70-80 λίτρα, η υπηρεσία έχει μετακινηθεί στον δείκτη σε 445-470 οδηγεί ανά ημέρα - ένα άλμα σε ένα ποιοτικά νέο επίπεδο.

Επόμενη περίπτωση - από το backlinko. Μετά την προσθήκη στην προσγείωση εκατό με πρόταση για να εγγραφεί στο ενημερωτικό δελτίο, η μετατροπή μειώθηκε στο 1,73% - ήταν απαραίτητο να κάνουμε κάτι επειγόντως. Οι έμποροι της εταιρείας έχουν αναπτύξει ένα αναδυόμενο παράθυρο που εμφανίστηκε πριν από τους χρήστες που αποφάσισαν να εγκαταλείψουν τη σελίδα-στόχο. Έτσι φαινόταν:

Θυμηθείτε ότι η μετατροπή ήταν περίπου 1,7% πριν χρησιμοποιήσετε το αναδυόμενο παράθυρο; 2 ημέρες μετά την εκκίνηση των αναδυόμενων, τα στατιστικά στοιχεία άλλαξαν. Σε μόλις δύο ημέρες, ο συντελεστής μετατροπής έχει αυξηθεί από 1,73% σε 4,83% - περισσότερο από 2 φορές!

Φυσικά, σε έναν κόσμο όπου μία ικανή δοκιμασία μπορεί να αυξήσει τη μετατροπή κατά 100, 300%, ακόμη και το 1300%, τα αποτελέσματα αυτού του πειράματος φαίνονται μέτως. Ωστόσο, αυτό δεν είναι αλήθεια.

Πρώτα απ 'όλα, έχοντας μια μεγάλη βάση συνδρομής, οι έμποροι μπορούν να δημιουργήσουν ένα σχετικό περιεχόμενο στο κοινό τους και να προσαρμόσουν το σύστημα διασταυρούμενης πώλησης. Έτσι, δεδομένης των προβλέψεων και άλλων παραγόντων, η μία επαφή φέρνει κατά μέσο όρο $ 15.

Εάν τα αναδυόμενα παράθυρα θα έχουν ως αποτέλεσμα 15 επιπλέον συνδρομητές την ημέρα, τότε το ημερήσιο εισόδημα θα αυξηθεί κατά μέσο όρο $ 225 και το ετήσιο εισόδημα είναι $ 82 125, αντίστοιχα. Δεν είναι κακά κέρδη για 2 λεπτά ελέγχου ρυθμίσεων, σωστά;

Προφανώς, οι pop-up των haters ήταν λάθος. Αλλά υπάρχουν και άλλοι παράγοντες: το ποσοστό αποτυχίας και η επίδραση των αναδυόμενων παραθύρων σε μια εμπειρία χρήστη. Τι λες για αυτό?

2. Πώς επηρεάζουν τα αναδυόμενα παράθυρα χρήστη και το ποσοστό αποτυχίας;

Μία από τις πρώτες σκέψεις στην αναδυόμενη αναδυόμενη είναι η αύξηση του αριθμού των αποτυχιών, επειδή όλο και περισσότεροι άνθρωποι θα φύγουν με το LEDDING λόγω του σφάλματος του αναδυόμενου παραθύρου, το οποίο είναι απολύτως λογικό. Ωστόσο, ας θυμηθούμε τα παραπάνω παραδείγματα: Οι έμποροι του WP αρχάριος δεν είδαν τις διακυμάνσεις αυτού του δείκτη, καθώς και το backlinko - ο αριθμός των αποτυχιών δεν έχει αλλάξει και στις δύο περιπτώσεις.

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

3. Τι γίνεται με την εμπειρία των χρηστών;

Προφανώς, οι επισκέπτες παραμένουν. Οι έμποροι του WP αρχάριος δεν έλαβαν ένα ενιαίο παράπονο με τα αναδυόμενα παράθυρα από τους πελάτες τους.

Αν το σκεφτείτε, έχει νόημα. Ναι, είναι δυσάρεστο να το δείτε μετά τη μετάβαση στον πόρο στον σύνδεσμο από το Facebook:

Αλλά αυτό δεν είναι ένας λόγος στην οργή να εγκαταλείψει τον ιστότοπο. Τι κάνετε συνήθως σε τέτοιες περιπτώσεις; TRUE - Κλείστε το αναδυόμενο παράθυρο και συνεχίστε την αναζήτηση για το επιθυμητό περιεχόμενο.

Επιπλέον, η αρμόδια χρήση των αναδυόμενων παραθύρων είναι σε θέση να βελτιώσει την εμπειρία των χρηστών, ακολουθώντας το παράδειγμα της υπηρεσίας Vero. Εάν εισάγετε την κύρια σελίδα και μέσα σε 30 δευτερόλεπτα, μην πάρετε καμία ενέργεια, θα δείτε ένα παράθυρο στη γωνία με το κείμενο: "Τι σας εμποδίζει να εγγραφείτε στο Vero αυτή τη στιγμή;".

4. Πώς να καταστρέψετε τη χρηστικότητα με τα αναδυόμενα παράθυρα;

Ωστόσο, δεν μπορείτε να ενσωματώσετε την προσγείωση οποιασδήποτε αναδυόμενης ανακοινώσεως και ελπίδας για υψηλή μετατροπή. Εάν το παράθυρο αναδυόμενο παράθυρο δεν ξεχωρίζει στη σελίδα, τότε είναι τουλάχιστον άχρηστο.

Θα φύγετε προσγείωση, και εδώ ... Bam! Υπήρχε κάτι ακατανόητο, πού εμφανίστηκε το κουμπί σφράγισης από τη μέση της σελίδας; Στην πραγματικότητα, αυτό το αναδυόμενο παράθυρο ενσωματώνεται σε μια αποσυνδεδεμένη σελίδα, ψεκάζοντας με το φόντο. Όταν δεν διαχωρίζετε τα αναδυόμενα παράθυρα από την υπόλοιπη σελίδα, χαλάει την εμπειρία του χρήστη.

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

5. Δημιουργία αποτελεσματικών αναδυόμενων παραθύρων

Πριν αρχίσετε να δημιουργείτε αναδυόμενα παράθυρα, εξετάστε τις βασικές τους απόψεις. Υπάρχουν δύο μεγάλες ποικιλίες αναδυόμενων παραθύρων:

1. Μεγάλα παράθυρα (επικάλυψη).
2. Τα παράθυρα αναδυόμενα παράθυρα ως αποτέλεσμα της σελίδας κύλισης.

Υπεροχή

Μοιάζουν με ένα παραπάνω παράδειγμα. Παρόμοια παράθυρα σκοτεινιάζουν ολόκληρη την οθόνη, το φόντο μετριοπαθής. Το αναδυόμενο παράθυρο παραμένει το μόνο στοιχείο στη σελίδα που είναι σαφώς ορατό στον χρήστη - in Πρόσφατα Υπήρξε μια τάση να χρησιμοποιείτε αναδυόμενα παράθυρα αυτής της μορφής.

Ο διάσημος έμπορος Dan Zarella χρησιμοποιεί επίσης επικαλύψεις με σκούρο του φόντου, αλλά το ίδιο το παράθυρο είναι πολύ μικρότερο από το συνηθισμένο:

Παράθυρα αναδυόμενα παράθυρα ως αποτέλεσμα της σελίδας κύλισης

Αυτή η προβολή των αναδυόμενων αναδυόμενων εμφανίζεται όταν ο χρήστης μετακινείται η σελίδα σε κάποιο στάδιο - πιο συχνά Αυτή τη μορφή Χρησιμοποιείται σε blogs, και είναι εξαιρετικά αποτελεσματικό. Fraghill Το ήμισυ της σελίδας, θα δείτε κάτι παρόμοιο:

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

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

6. Η καλύτερη στιγμή Για να εμφανίσετε τα αναδυόμενα παράθυρα

Εάν μιλάμε για δοκιμή overleev, η υπηρεσία Sumome συνέλεξε τα ακόλουθα δεδομένα: μέχρι σήμερα, ο βέλτιστος χρόνος είναι 5 δευτερόλεπτα μετά τη μετάβαση του επισκέπτη στην προσγείωση.

Η υπηρεσία που δίνει μια άλλη στατιστική. Κατά τη διάρκεια των δοκιμών, η εμφάνιση επικαλύψεων στα 15, 30 και 45 δευτερόλεπτα μετά την ελεγχόμενη προσγείωση του χρήστη και το βέλτιστο αποτέλεσμα έδειξε την πρώτη επιλογή: την εμφάνιση του παραθύρου μετά από 15 δευτερόλεπτα κατά 11% πιο αποτελεσματικές επιλογές με 30 δευτερόλεπτα και 50% επιλογές με 45 δευτερόλεπτα μετά την προσγείωση.

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

Το αναδυόμενο παράθυρο είναι μια αναδυόμενη διαφήμιση, σχεδιασμένη για να προσελκύσει την κυκλοφορία ιστού ή να συλλέξει διευθύνσεις ηλεκτρονικού ταχυδρομείου. Τέτοια στοιχεία είναι συχνά μορφές διαδικτυακής διαφήμισης στο WorldwideWeb. Κατά κανόνα, αυτά είναι τα νέα παράθυρα που ανοίγουν σε ένα πρόγραμμα περιήγησης στο Web για την εμφάνιση της διαφήμισης. Συνήθως, παράγονται από το Javascript χρησιμοποιώντας τη δέσμη scripting Cross-site (XSS), μερικές φορές με το δευτερεύον ωφέλιμο φορτίο και τη χρήση του AdoBeflash.

Η ποικιλία Popup είναι αναδυόμενες διαφημίσεις που ανοίγουν σε ένα νέο παράθυρο του προγράμματος περιήγησης, κρυμμένο ενεργό.

Ιστορικό προέλευσης

Τα πρώτα αναδυόμενα παράθυρα προέκυψαν στο Tripod.com Hosting στα τέλη της δεκαετίας του 1990. Ο Ethan Tsukerman ισχυρίζεται ότι έγραψε τον κώδικα για να ξεκινήσει τη διαφήμιση σε ξεχωριστά παράθυρα σε απάντηση στις καταγγελίες διαφημίσεων banner. Στη συνέχεια, ο προγραμματιστής έχει επανειλημμένα φέρει τη συγνώμη της για την ταλαιπωρία, η οποία άρχισε να προκαλεί την εφεύρεσή του.

Η όπερα ήταν το πρώτο σημαντικό πρόγραμμα περιήγησης στον οποίο συμπεριλήφθηκαν τα εργαλεία για να μπλοκάρουν τα αναδυόμενα παράθυρα. Το Browser Mozilla βελτίωσε αργότερα αυτές τις εξελίξεις, αρχίζοντας να αποκλείστε το αναδυόμενο παράθυρο που δημιουργείται όταν φορτωθεί η σελίδα. Στις αρχές της δεκαετίας του 2000, όλα τα μεγάλα προγράμματα περιήγησης στο Web εκτός από τον Internet Explorer επέτρεψαν στον χρήστη να αφαιρέσει σχεδόν εντελώς ανεπιθύμητες αναδυόμενες διαφημίσεις. Το 2004, η Microsoft κυκλοφόρησε τα Windows XP SP2, τα οποία πρόσθεσε αποκλεισμό και σε αυτό το πρόγραμμα περιήγησης.

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

Αναδυόμενα παράθυρα

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

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

Σε αυτή την περίπτωση, ένα κλικ (ακόμα τυχαίο) ένα αναδυόμενο παράθυρο μπορεί να οδηγήσει στο άνοιγμα των άλλων.

Παράκαμψη αναδυόμενου αποκλεισμού

Συνδυασμός Διαφημιστικό banner Και το αναδυόμενο παράθυρο είναι μια "ανακοίνωση ανακοίνωσης" που χρησιμοποιεί DHTML για να εμφανίζεται στην οθόνη πάνω από το περιεχόμενο της σελίδας. ΑΠΟ Χρησιμοποιώντας το JavaScript Η ανακοίνωση μπορεί να εφαρμοστεί στην κορυφή μιας ιστοσελίδας στο διαφανές στρώμα. Αυτή η διαφήμιση μπορεί να εμφανίζεται σε όλες σχεδόν τις περιπτώσεις όταν ο συντάκτης της διαφήμισης θέλει. Ένα τέτοιο σενάριο παραθύρου παραθύρου δεν μπορεί να παρατηρηθεί εκ των προτέρων. Για παράδειγμα, η διαφήμιση μπορεί να περιέχει κινούμενα σχέδια AdoBeflash που σχετίζεται με τον ιστότοπο του διαφημιζόμενου. Μπορεί επίσης να μοιάζει με ένα κανονικό παράθυρο. Καθώς η διαφήμιση αποτελεί μέρος μιας ιστοσελίδας, δεν μπορεί να αποκλειστεί με τη χρήση ενός αποκλεισμού, αλλά το άνοιγμα του μπορεί να αποφευχθεί από Εφαρμογές τρίτων (όπως το adblock και το adblockplus) ή χρησιμοποιώντας προσαρμοσμένους πίνακες στυλ.

Πληθυσμό.

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

Δημοφιλής τεχνολογία διαφήμισης

Δύο πολύ απλές λειτουργίες JavaScript που καταχωρήθηκαν στη διαφημιστική διαφήμιση συμμετείχαν το 1997 χρησιμοποιώντας το πρόγραμμα περιήγησης Netscape 2.0b3. Αυτή η μεθοδολογία χρησιμοποιείται ευρέως στο διαδίκτυο. Οι σύγχρονοι εκδότες ιστού και οι διαφημιζόμενοι το χρησιμοποιούν για να δημιουργήσουν ένα παράθυρο πριν από το περιεχόμενο σελίδων, τη διαφήμιση εκκίνησης και στη συνέχεια να το στείλετε πίσω από την οθόνη.

Τα περισσότερα μοντέρνα προγράμματα περιήγησης σας επιτρέπουν να ανοίξετε το παράθυρο αναδυόμενου παραθύρου μόνο εάν υπάρχει οποιαδήποτε αλληλεπίδραση με τον χρήστη (για παράδειγμα, ένα κλικ του ποντικιού). Οποιεσδήποτε μη διαδραστικές κλήσεις (επανάκληση στο χρονοδιακόπτη, τα συμβάντα λήψης κ.λπ.) θα μπλοκαριστούν από ένα νέο παράθυρο. Για να πάρετε γύρω από αυτόν τον περιορισμό, τα περισσότερα pop-ups ξεκινούν χρησιμοποιώντας έναν ακροατή εκδήλωσης ποντικιού που συνδέεται απευθείας στο έγγραφο ή το σώμα του εγγράφου. Αυτό σας επιτρέπει να διορθώσετε όλες τις περιπτώσεις του κλικ του ποντικιού στη σελίδα που δεν χρησιμοποιήθηκαν από άλλους χειριστές συμβάντων. Για παράδειγμα, όταν ο χρήστης επιλέγει το κείμενο, το κλικ του ποντικιού παρατηρείται από τον ακροατή που επισυνάπτεται στο έγγραφο. Ως αποτέλεσμα, ανοίγει ένα αναδυόμενο παράθυρο χρησιμοποιώντας τον παραπάνω κώδικα.

Αναδυόμενα παράθυρα γεννήτριας "sly"

Οι χρήστες διαφόρων τοποθεσιών και εφαρμογών ιστού αντιμετωπίζουν διαρκώς με ανεπιθύμητα αναδυόμενα παράθυρα κατά τη χρήση του προγράμματος περιήγησης. Συνήθως, ένα τέτοιο αναδυόμενο παράθυρο αφαιρείται χρησιμοποιώντας τη λειτουργία "Κλείσιμο" ή "Ακύρωση". Δεδομένου ότι πρόκειται για μια τυπική απάντηση χρήστη, οι προγραμματιστές άρχισαν να εφαρμόζουν κάποια κόλπα. Έτσι, κατά την ανάπτυξη Διαφημιστικά μηνύματα Τα κουμπιά ή οι έλεγχοι οθόνης δημιουργούνται, παρόμοια με την επιλογή "Κλείσιμο" ή "Ακύρωση". Ωστόσο, όταν ο χρήστης επιλέγει μία από αυτές τις επιλογές, το κουμπί εκτελεί μια απροσδόκητη ή μη εξουσιοδοτημένη ενέργεια (για παράδειγμα, το άνοιγμα ενός νέου αναδυόμενου παραθύρου ή κατεβάστε ένα ανεπιθύμητο αρχείο στο σύστημα χρήστη).

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

Ανακατεύθυνση URL

Μερικές φορές η διεύθυνση URL ανακατεύεται σε προωθητικές σελίδες χρησιμοποιώντας τη λειτουργία ανακατεύθυνσης URL του φόντου. Είναι μερικές φορές ανοιχτές σε μια νέα καρτέλα και, στη συνέχεια, το περιεχόμενο της παλιάς καρτέλας υποβάθρου αντικαθίσταται από τις διαφημιστικές σελίδες χρησιμοποιώντας ανακατεύθυνση. Το adblockplus, το ublock ή το noscript δεν μπορεί να εμποδίσει αυτά τα ανακατευθύνοντα ανακατευθύνοντα. Αυτή η λειτουργία χρησιμοποιεί όλο και περισσότερο διανομείς διαφήμισης σε αναζήτηση ενός τρόπου, πώς να δημιουργήσετε ένα αναδυόμενο παράθυρο πιο ενεργό.

Πώς να απαλλαγείτε από τα αναδυόμενα παράθυρα

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

• Firefox: Πατήστε το κουμπί με το όνομα της εφαρμογής στην επάνω αριστερή γωνία. Μετακινήστε το δείκτη του ποντικιού για να "βοηθήσει" και επιλέξτε "Σχετικά με τον Firefox". Αυτό θα ανοίξει ένα παράθυρο με πληροφορίες σχετικά με την έκδοση του προγράμματος περιήγησης. Εάν το πρόγραμμα περιήγησής σας δεν έχει ληφθεί αυτόματα και εγκατασταθεί.
• Chrome: Πατήστε το κουμπί μενού στην επάνω δεξιά γωνία. Επιλέξτε "Σχετικά με το Chrome" στο κάτω μέρος, θα ανοίξει νέα ένθετακαι το πρόγραμμα περιήγησης θα ελέγξει τη διαθεσιμότητα ενημερώσεων. Εάν είναι, θα εγκατασταθούν αυτόματα.
• Internet Explorer: Η μέθοδος ενημέρωσης εξαρτάται από την έκδοση του καπλαμά που χρησιμοποιείται. Για παλαιότερες επιλογές, θα πρέπει να εισέλθετε στο κέντρο Ενημερώσεις των Windows. Για τον Internet Explorer 10 και 11 μπορείτε να ενεργοποιήσετε Αυτόματες ενημερώσειςΚάνοντας κλικ στο εικονίδιο ταχυτήτων και επιλέξτε τον Internet Explorer.

Εάν οι ενημερώσεις δεν βοηθούν

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

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

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

Σε αυτήν την καταχώρηση, θα μάθουμε να κάνουμε αυτό το αναδυόμενο παράθυρο. Απλή, γρήγορα, αποτελεσματικά, και το πιο σημαντικό δωρεάν!

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

Εχουμε:
fs_popup_bg. - Συχνότητα του χώρου.
fs_popup. - το ίδιο το παράθυρο.
fs_popup_head - Τίτλος παραθύρου;
fS_CONTENT - το περιεχόμενο του παραθύρου, χωρισμένο σε δύο μέρη.

Τώρα δίνουμε τα απαραίτητα στυλ ...

Διατηρούμε τα στυλ του αναδυόμενου παραθύρου μας.
#fs_popup_bg. - Προτείνει ότι το υπόβαθρό μας θα είναι μαύρο, και σχεδόν δεν είναι διαφανές (0,9), θα βρίσκεται στην επάνω αριστερή γωνία και θα καταλάβει ολόκληρη την περιοχή οθόνης. Σε αυτή την περίπτωση, το βάθος του στοιχείου και με μεγαλύτερη ακρίβεια την ανύψωση του έναντι άλλων στοιχείων θα είναι πολύ μεγάλο (εν γνώσει περισσότερους από άλλους).
#fs_popup. - Προτείνει ότι το παράθυρο θα βρίσκεται στο επίπεδο του φόντου (διαφορετικά δεν θα το δούμε). Τα μεγέθη του θα είναι 600px σε 300px με στρογγυλεμένες γωνίες και ένα κόκκινο πλαίσιο.
.FS_CONTENT_LEFT, .FS_CONTENT_RIGHT - Μας λέει ότι τα μπλοκ πιέζονται προς τα αριστερά (πρέπει να εντοπίσετε σε ένα επίπεδο), έχουν καταιγίδες και γραμματοσειράς.

Συμπληρώστε το παράθυρο περιεχομένου μας:

Και οι μορφές μας θα προστεθούν, για μια πιο όμορφη οθόνη:

Εδώ είναι η αρχή και αυτό είναι. Όπως μπορεί να δει από το παράδειγμα JavaScript για το αναδυόμενο παράθυρο, το παράθυρο είναι ουσιαστικά απαραίτητο σε δύο περιπτώσεις:
1) το γεγονός που κλείνει το παράθυρό μας.
2) ένα συμβάν κάνοντας κλικ στο κουμπί "Εγγραφή".
Δεν θα βλάψει επίσης τον έλεγχο αν αυτό το παράθυρο έχει εμφανιστεί Αυτός ο υπολογιστής. Για τους σκοπούς αυτούς, η εργασία με τα cookies είναι αρκετά κατάλληλη.