Bir açılır pencere nasıl yapılır

Açılır pencere nasıl yapılır, her genç acemi programcının aklını heyecanlandıran bir sorudur. Ve bugün bu açılır pencerenin nasıl yapılacağına bakacağız. Hemen biraz ileri gideceğim çünkü yapacağımız şey gerçekten çok, çok ilginç ve işlevsel olacak.

Bu yüzden, müşterilerimden birinin web sitesinde uyguladığım benzer bir pencere yapacağız. Görebilirsin. Böyle bir pencere oluşturmanın bu yönteminin en büyük avantajı, JavaScript kullanmayacağız, ancak kendimizi yalnızca en sevdiğim CSS3 ve HTML5 ile sınırlayacağız. Bununla bir taşla birkaç kuş vuracağız. İlk olarak, sitemizin yüklenmesini kolaylaştıracağız ve ikinci olarak, açılır pencerenize bağımsız olarak herhangi bir boyut, renk, şekil vermenizi sağlayacak minimum kod kullanımıyla her şeyi uygun ve kolay bir şekilde uygulayacağız. Bence harika. Öyleyse başlayalım.

Halihazırda bir web siteniz olduğunu ve örneğin “kayıt” veya “çevrimiçi başvuru” gibi bir yere bir düğme uygulamak istediğinizi hayal edin. Ve kullanıcının, bu düğmeye tıklayarak, içine bazı verileri girmenize ve ardından bunları site yöneticisine göndermenize izin veren küçük bir pencere görmesini istiyorsunuz. Şimdi yapacağımız pencere budur.

Başlangıç ​​olarak bu butonu oluşturacağız, bence çok zorlanmadan yapabilirsiniz. Ama etikette Aşağıdaki #openModal'ı yazmalısınız . Sizin için kabaca böyle görünmelidir. Ardından, kapanış etiketinden önce

aşağıdaki kodu yazın. Dekorasyon ve kimlik için sınıfları kullanacağımızı lütfen unutmayın. Bu kuralı izleyerek sayısız farklı açılır pencere oluşturabiliriz.

Şimdi her şeyi güzelce düzenlememiz ve her şeyin olması gerektiği gibi çalışmasını sağlamamız gerekiyor. Çıkarmaya başlayalım.

Kayıt

ModalDialog (konum: sabit; yazı tipi ailesi: Arial, Helvetica, sans-serif; üst: 0; sağ: 0; alt: 0; sol: 0; arka plan: rgba (0,0,0,0.8); z-endeksi : 99999; -webkit-geçişi: opaklık 400ms kolaylaşma; -moz-geçişi: opaklık 400ms kolaylaşma; geçiş: opaklık 400ms kolaylaşma; görüntüleme: yok; işaretçi-olayları: yok;)

Yukarıdaki kod aşırı derecede basittir. Ama her ihtimale karşı, blogumun birçok yeni başlayan tarafından okunduğunu bildiğim için olası zorlukları analiz edeceğim. Pencerenin her zaman tek bir yerde olması için ona sabit bir pozisyon verdim. Ayrıca pencerenin tam ekrana uzanması için köşelerin koordinatlarını 0 noktasına ayarladım. Arka plan için siyah ayarlandı ve şeffaflık eklendi, böylece etrafı kararttı kalıcı pencere... Pencereyi sayfanın geri kalanının üstünde tutmak için büyük olarak ayarlayın. z-endeksi... En sevdiğimiz modal pencerenin pürüzsüz görünümü ve kaybolması için ve inan bana, geçiş... Pencereyi gizlemek için ayarlamanız gerekir Görüntüle içinde Yok... Mülk işaretçi olaylarıöğelerin etkileşimini (tıklanabilirliğini) kontrol etmenizi sağlar.

Bir açılır pencere açma

Penceremizin dekorasyonunu yaptık. Fakat! Bana diyorsun ki, çalışmıyor. Evet, cevap veriyorum, öyle. Şimdilik işin eğlenceli kısmı. Sözde sınıf CSS3'te göründü hedef, gerçekten yararlı bir şey, ne dersen de. Ve kalıcı açılır penceremizde hiç onsuz. Bu ne işe yarıyor. Bu sözde sınıf, içinde tanımlanan bazı öğelerle belirtilmişse adres çubuğu id olarak, bizim durumumuzda #openModal. Ardından, bu sözde sınıfın özellikleri, hedef öğenin özelliklerinden daha önemli hale gelecektir. Sanırım ne yapmak istediğimi zaten anladınız.

ModalDialog: hedef (görüntüleme: blok; işaretçi olayları: otomatik;). ModalDialog> div (genişlik: 400 piksel; konum: göreli; kenar boşluğu: %10 otomatik; dolgu: 5 piksel 20 piksel 13 piksel 20 piksel; kenarlık yarıçapı: 10 piksel; arka plan: # arka plan: -moz-doğrusal-gradyan (#fff, # 999); arka plan: -webkit-doğrusal-gradyan (#fff, # 999); arka plan: -o-doğrusal-gradyan (#fff, # 999); )

sözde sınıf hedef EKRAN öğesini BLOK olarak ayarlar ve böylece pencere açılır. POINTER-EVENTS özelliği, bağlantı etkinliğini kontrol eder.
DIV özellikleri, pencerenin genişliğini, ekrandaki konumunu ve pencereyi sayfanın ortasına ayarlamak için dolguyu ayarlar. Özelliklerin geri kalanı, sayfanın içindeki kenar boşluklarını, köşelerin yuvarlatılmasını ve pencerenin arka planını beyazdan koyu griye gradyanlarla ayarlar.

Kalıcı bir pencereyi kapatma

Pencere tasarımı ayarlandığında ve açıldığında, tasarlamak ve işlevselliği uygulamak için bir pencere kapatma düğmesi yapmanız gerekir. CSS3 ve HTML5 kullanmak, resim kullanmadan şık özel düğmeler oluşturmanıza olanak tanır:

Kapat (arka plan: # 606061; renk: #FFFFFF; satır yüksekliği: 25 piksel; konum: mutlak; sağ: -12 piksel; metin hizalama: merkez; üst: -10 piksel; genişlik: 24 piksel; metin süsleme: yok; yazı tipi- ağırlık: kalın; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px # 000; -webkit-box-shadow: 1px 1px 3px # 000; kutu gölgesi: 1px 1px 3px # 000;) .close: üzerine gelin (arka plan: # 00d9ff;)

Bilinen bir gerçektir: çoğu ziyaretçi bir çevrimiçi mağazanın ürün sayfasını ilk ziyaretlerinde satın alma yapmaz ve hatta potansiyel müşteriler bile bırakmaz - ancak çoğunluk ne kadar büyük?

See Why şirketinin araştırmasına göre, bunlar kaynağa ilk gelen ziyaretçilerin %99'u. Tabii ki, öncelikle e-ticaret sitelerinden bahsediyoruz, ancak soru hala ortaya çıkıyor: ziyaretçilerin %99'u ilk ziyaretlerinde hiçbir şey satın almıyorsa, onları geri dönmeye nasıl teşvik edebiliriz?

İyi haber şu ki şu istatistik: Ziyaretçilerin %75'i satın alma işlemlerini tamamlamak için daha sonra geri gelmeye istekli.

Açılır pencereler hakkında ne düşünürseniz düşünün, bu pazarlama teknolojisi dikkat çekmede ve iletişim bilgilerini toplamada (potansiyel müşteri yaratma) hala etkilidir.

Basitçe söylemek gerekirse, açılır pencereleri kullanarak bir ziyaretçiyi hızlı bir şekilde açılış sayfasına geri döndürebilirsiniz.

Neden?

Bunun nedeni, "kalıp kesintisi" olarak bilinen bir ikna tekniğidir - dikkatiniz, belirli bir ritim veya anlatım dizisi tarafından "yatıldığında", aniden agresif bir şekilde beklenmedik bir şeyi çeker. Film izlerken, mizahi şovlar izlerken ve hatta önemli görüşmelerde bu etkiyi sıklıkla yaşarsınız.

İçerik ve e-posta pazarlaması söz konusu olduğunda, "kalıp kesintisi", okuyucu sorunu çözmeye ve etkileşime devam etmeye kararlı olduğunda (bir haber bülteni, satın alma vb. için kaydolun) en etkilidir.

Made.com hizmetinden örnek. Pazarlamacılar, ziyaretçilerine önemsiz bir şey için ücretsiz 10 Euro'luk bir kupon teklif etti - adres E-posta... Bu yapıldı çünkü:

1. Herkes para hediyelerini sever;
2. Düzenli e-posta iletişimi için 10 € küçük bir fiyattır.

ExactTarget'a göre e-posta, müşteriler için en çok tercih edilen pazarlama kanalıdır ve tüketicilerin %77'si e-postayı diğer marka etkileşim kanallarına tercih etmektedir.

Belki pop-up'lar o kadar da kötü değildir?

Pop-up'lardan nefret ediyor olabilirsiniz ve buna hakkınız var. Yine de, açılış sayfasına geçtikten hemen sonra böyle bir şey görmek isteyenler:

Veya bunun gibi:

Şirketin faaliyet alanını bile bilmiyor olabilirsiniz, ancak zaten boynunuza kadar açılır pencerelerle dolmuş durumdasınız. Yukarıdaki örnekler başarısız: her şeyden önce, ziyaretçi marka hakkında daha fazla bilgi edinmek istiyor ve ardından "Ücretsiz Trafik Oluşturma Kılavuzu", "Ücretsiz Trafik Oluşturma Kılavuzu"nu indiriyor. e-kitap"Ve saire. Elbette, çoğu kullanıcı bu tür şeylerden nefret eder ve markayla etkileşime girmeyi reddederek yanıt verir.

Biraz serinlemek ve test sonuçlarına bakmak faydalı olabilir. Rakamlar ne diyor? Açılır pencerenin bölünmüş testinin verileri ve açılır pencere teklifindeki "Hayır, teşekkürler" düğmesi.

Etkileyici? O halde bu yaklaşımı etkin bir şekilde kullanan şirketlerin sonuçlarına bakalım.

1. Pop-up'ları kullanma deneyimi

Tipik bir günde, WP Acemi, aşağıdakiler sayesinde yaklaşık 70-80 yeni abone kazanıyor: farklı yöntemler kurşun nesil. Ancak abonelik tabanı ne kadar büyük olursa, iş o kadar başarılı olur, bu nedenle hizmetin pazarlamacıları, pop-up'larla bir dizi denemeye karar verdi.

Ne yapıldı?

Kullanıcı siteden ayrılmak istediğinde görünen bir açılır pencere geliştirildi. Etki, imleç izleme teknolojileri ve diğer yöntemler sayesinde elde edildi. Pencere şöyle görünüyordu:

Sonuçlar nelerdir?

Kritik sayfalardaki (tüm sitedeki değil) pop-up'lar kayıt sayısını %660 artırdı. Yani, 70-80 müşteri adayından günde 445-470 müşteri adayına taşınan hizmet - niteliksel olarak yeni bir seviyeye sıçrama.

Bir sonraki vaka Backlinko'dan. Haber bültenine abone olma teklifiyle birlikte açılış sayfasına bir CTA ekledikten sonra, dönüşüm %1,73'e düştü - acilen bir şeyler yapılması gerekiyordu. Şirketin pazarlamacıları, açılış sayfasından ayrılmaya karar veren kullanıcıların önünde görünen bir açılır pencere geliştirdi. İşte böyle görünüyordu:

Açılır pencereyi kullanmadan önce dönüşümün yaklaşık %1.7 olduğunu hatırlıyor musunuz? Lansmandan sonraki 2 gün içinde açılır istatistikler değişti. Sadece iki gün içinde, dönüşüm oranı %1,73'ten %4,83'e yükseldi - iki katından fazla!

Elbette, tek bir yetkin testin dönüşümü %100, %300, hatta %1300 oranında artırabildiği bir dünyada, bu deneyin sonuçları mütevazı görünüyor. Ancak, bu pek doğru değil.

Her şeyden önce, geniş bir abone tabanı ile pazarlamacılar, hedef kitlelerine uygun içerik oluşturabilir ve bir çapraz satış sistemi kurabilir. Böylece, yukarı satışlar ve diğer faktörler dikkate alındığında, bir kişi hizmeti ortalama 15 $ 'a getiriyor.

Açılır pencereler günde 15 ek abone getirirse, günlük gelir ortalama 225 $ ve yıllık gelir - sırasıyla 82.125 $ artacaktır. Ayarları kontrol ettikten 2 dakika sonra fena bir gelir değil, değil mi?

Açıkçası, açılır pencereden nefret edenler yanılıyordu. Ancak başka faktörler de var: hemen çıkma oranı ve pop-up'ların kullanıcı deneyimi üzerindeki etkisi. Peki buna ne dersin?

2. Pop-up'lar kullanıcı deneyimini ve hemen çıkma oranını nasıl etkiler?

Pop-up'lardan bahsederken ilk akla gelenlerden biri hemen çıkma sayısındaki artıştır, çünkü her geçen gün daha fazla insan pop-up'lar nedeniyle açılış sayfasını terk edecektir ki bu kesinlikle mantıklıdır. Ancak, yukarıdaki örnekleri hatırlayın: WP Acemi pazarlamacılar bu göstergedeki dalgalanmayı görmedi ve Backlinko da görmedi - her iki durumda da hemen çıkma sayısı değişmedi.

Dan Zarrella, kişisel özellikleri üzerinde bir dizi test yaptıktan sonra aynı sonuca vardı. Açılış sayfası pop-up'ın varlığının hemen çıkma oranını hiçbir şekilde etkilemediğini öğrendikten sonra. Değişen tek şey, Dan'in pop-up'ları kaldırarak gelen olası satışların %50'sini kaybetmesiydi.

3. Peki ya kullanıcı deneyimi?

Ziyaretçiler umursamıyor gibi görünüyor. WP Acemi pazarlamacılar, müşterilerinden herhangi bir açılır pencere şikayeti almamıştır.

Eğer düşünürsen, mantıklı geliyor. Evet, Facebook'tan bir bağlantı aracılığıyla bir kaynağa gittikten sonra böyle bir şey görmek tatsız:

Ancak bu, siteyi öfkeyle terk etmek için bir neden değil. Bu gibi durumlarda genellikle ne yaparsınız? Doğru - açılır pencereyi kapatın ve istenen içeriği aramaya devam edin.

Ayrıca, pop-up'ların yetkin kullanımı, Vero hizmeti gibi kullanıcı deneyimini artırabilir. Ana sayfaya giderseniz ve 30 saniye içinde herhangi bir işlem yapmazsanız, köşede “Şu anda Vero'ya abone olmanızı engelleyen nedir?” yazan bir pencere göreceksiniz.

4. Pop-up'larla kullanılabilirlik nasıl yok edilir?

Ancak, açılış sayfanıza herhangi bir pop-up reklam yerleştiremez ve yüksek dönüşüm elde etmeyi umamazsınız. Açılır pencere sayfada vurgulanmazsa, en azından işe yaramaz.

Açılış sayfasından çıkmak üzeresiniz ve ardından ... Bam! Anlaşılmaz bir şey oldu, sayfanın ortasında CTA düğmesi nerede çıktı? Aslında, bu açılır pencere gölgeli olmayan sayfanın üzerine bindirilir ve arka plana karışır. Pop-up'ları sayfanın geri kalanından ayırmamanız, kullanıcı deneyimini büyük ölçüde mahveder.

Görünen o ki, birçok pazarlamacı pop-up'lar konusunda yanılıyor - görünüşe göre hala işe yarıyorlar. Artık maksimum etki için açılış sayfanızda pop-up'ları nasıl kullanacağınızı öğreneceksiniz.

5. Etkili açılır pencereler oluşturun

Pop-up oluşturmaya başlamadan önce, ana türlerine bakalım. İki ana açılır pencere türü vardır:

1. Büyük pencereler (bindirmeleri).
2. Sayfayı kaydırmanın bir sonucu olarak açılan pencereler.

Bindirmeler

Yukarıdaki örneğe benziyorlar. Bu tür pencereler tüm ekranı gizler ve arka planı karartır. Açılır pencere, sayfada kullanıcı tarafından açıkça görülebilen tek öğe olarak kalır - Son zamanlarda bu formattaki açılır pencereleri kullanma eğilimi var.

Tanınmış pazarlamacı Dan Zarella da arka planı karartan kaplamalar kullanıyor, ancak penceresinin kendisi normalden çok daha küçük:

Sayfa kaydırmanın bir sonucu olarak açılan pencereler

Bu tür pop-up'lar, kullanıcı sayfayı bir aşamaya kaydırdığında görünür - çoğu zaman bu biçim bloglarda kullanılır ve son derece etkilidir. Sayfanın yarısını aşağı kaydırdığınızda şöyle bir şey göreceksiniz:

Kullandığınız yazılıma veya eklentiye bağlı olarak, kaydırma derinliğini, yani kullanıcının açılır pencereyi görmek için ne kadar ileri gitmesi gerektiğini deneyebilirsiniz. Ayrıca, kullanıcının sitede geçirdiği süreye göre pop-up'ların görünümünü ayarlayabilirsiniz.

Açılır pencerelerdeki başlıklar, alan metinleri ve düğmeler için CTA'daki içerikle aynı gereksinimler geçerlidir. Sonuçta, pop-up'lar, amacı görüntülemeleri / aboneleri / olası satışları artırmak olan harekete geçirici öğelerdir.

6. En iyi zaman pop-up'ları göstermek için

Bindirmeleri test etmekten bahsedersek, SumoMe hizmeti şu verileri toplamıştır: bugün en uygun süre, bir ziyaretçinin bir açılış sayfasına geçmesinden sonraki 5 saniyedir.

HangiTestWon hizmeti farklı istatistikler sağlar. Testler sırasında, kullanıcı indikten 15, 30 ve 45 saniye sonra bindirmelerin görünümü kontrol edildi ve ilk seçenek en uygun sonucu gösterdi: 15 saniye sonra bir pencerenin görünümü, 30 saniyelik seçeneğe göre %11 daha etkilidir. , ve inişten 45 saniye sonra seçenekten %50 daha fazla. ...

Ancak unutmayın - pencerenin görünmesi için ideal bir zaman yoktur, çünkü her durumda testler gereklidir. Aynı şey pop-up'ların sıklığı sorusu için de geçerlidir. Basitçe söylemek gerekirse, diğer insanların kaynaklarının istatistikleri kendi testiniz için motive edebilir, ancak bir taklit - test nesnesi olmamalıdır.

PopUP, web trafiğini artırmak veya e-posta adreslerini toplamak için tasarlanmış bir pop-up reklamdır. Bu tür öğeler genellikle WorldWideWeb'deki çevrimiçi reklam biçimleridir. Genellikle bunlar, reklamları görüntülemek için bir web tarayıcısında açılan yeni pencerelerdir. Genellikle siteler arası komut dosyası çalıştırma (XSS) kullanılarak JavaScript tarafından, bazen ikincil bir yük ile ve Adobe Flash kullanılarak oluşturulurlar.

PopUP çeşitleri, etkin pencerede gizlenen yeni bir tarayıcı penceresinde açılan pop-up reklamlardır.

Menşe tarihi

İlk pop-up reklamlar 1990'ların sonlarında Tripod.com'da göründü. Ethan Zuckerman, banner reklamlarla ilgili şikayetlere yanıt olarak reklamları ayrı pencerelerde yayınlama kodunu yazdığını iddia ediyor. Daha sonra geliştirici, buluşunun neden olmaya başladığı rahatsızlıktan dolayı defalarca özür diledi.

Opera, açılır pencere engelleme araçlarını içeren ilk büyük tarayıcıydı. Mozilla tarayıcısı daha sonra bu geliştirmeleri, sayfa yüklendiğinde oluşturulan PopUP'ı engelleyerek geliştirdi. 2000'lerin başında, Internet Explorer dışındaki tüm büyük web tarayıcıları, kullanıcının istenmeyen pop-up reklamları neredeyse tamamen kaldırmasına izin verdi. 2004'te Microsoft, bu tarayıcıya engelleme ekleyen Windows XP SP2'yi piyasaya sürdü.

Çoğu modern tarayıcı, açılır pencere koruma araçlarıyla birlikte gelir. Üçüncü taraf araçlar genellikle reklamları filtreleme gibi diğer özellikleri içerir.

Açılır pencereler

Bazı indirilebilir içerik türleri (resimler, ücretsiz müzik ve diğerleri) pop-up'lara neden olabilir. Ayrıca, bazen normal web sayfaları gibi görünürler ve site adı arama çubuğunda görünür. Birçok kaynak, o anda açık olan sayfayı kesintiye uğratmadan bilgileri görüntülemek için açılır pencereler kullanır. Örneğin, bir web sayfasında bir form doldurduysanız ve ek rehberliğe ihtiyacınız varsa, PopUP, forma girilmiş olan herhangi bir veriyi kaybetmenize neden olmadan size ek bilgiler verir. Çoğu açılır pencere engelleyici bu indirmeye izin verir.

Ancak, McAfee tarafından kullanılanlar gibi bazı web yükleyicilerinin yazılım yüklemek için bir açılır pencere kullandığını unutmayın. Birçok internet tarayıcısında, bir bağlantıya tıklarken Ctrl tuşuna basmak filtreyi atlayacaktır.

Bu durumda, bir açılır pencereye tıklamak (hatta yanlışlıkla) diğerlerinin açılmasına neden olabilir.

Pop-up Engelleyiciyi Atla

kombinasyon reklam afişi ve açılır pencere, sayfa içeriği üzerinde ekranda görüntülemek için DHTML kullanan bir "fareyle üzerine gelinen reklam"dır. DAN JavaScript kullanarak reklam, web sayfasının üstüne yer paylaşımlı olarak yerleştirilebilir. şeffaf katman... Bu reklam, reklamverenin istediği hemen hemen her durumda görünebilir. Böyle bir PopUP pencere betiği önceden fark edilemez. Örneğin, bir reklam, reklamverenin sitesiyle ilişkilendirilmiş bir Adobe Flash animasyonu içerebilir. Ayrıca normal bir pencere gibi görünebilir. Reklamlar bir web sayfasının parçası olduğu için engelleyici ile engellenemezler ancak açılması engellenebilir. Üçüncü taraf uygulamaları(AdBlock ve AdblockPlus gibi) veya özel stil sayfaları aracılığıyla.

PopUNDER

Böyle bir bildirim, normal bir PopUP penceresine benzer, ancak ana tarayıcı penceresinin önünde görünmek yerine arkasında gizli olarak görünür. Pop-up reklamlar yaygınlaşıp tüm bir bilgisayar ekranını kapladığında, birçok kullanıcı onları bakmadan hemen kapatmayı öğrendi. Bu nedenle, kullanıcının sitenin içeriğini görüntülemesini engellemeyen PopUNDER'lar ortaya çıktı. Ana tarayıcı penceresi kapatılana veya simge durumuna küçültülene kadar fark edilmeme eğilimindedirler. Araştırmalar, kullanıcıların bu reklamlara pop-up reklamlardan daha iyi yanıt verdiğini, çünkü çok müdahaleci görünmediklerini göstermiştir.

Popüler reklam teknolojisi

Reklam, 1997'de Netscape 2.0B3 tarayıcısı kullanılarak tanıtılan çok basit iki JavaScript özelliğini kullanıyor. Bu metodoloji internette yaygın olarak kullanılmaktadır. Modern web yayıncıları ve reklamverenler bunu sayfa içeriğinin önünde bir pencere oluşturmak, reklamı yüklemek ve ardından ekrandan göndermek için kullanır.

Çoğu modern tarayıcı, PopUP'ın yalnızca herhangi bir kullanıcı etkileşimi (fare tıklaması gibi) olması durumunda açılmasına izin verir. Etkileşimli olmayan tüm aramalar (zamanlayıcı geri araması, yükleme olayları vb.) yeni pencereyi engeller. Bu sınırlamaya geçici bir çözüm bulmak için, çoğu pop-up reklam, doğrudan belgeye veya belge gövdesine eklenen bir fare olay dinleyicisiyle tetiklenir. Bu, sayfada diğer olay işleyicileri tarafından tüketilmeyen tüm fare tıklamalarını yakalamanıza olanak tanır. Örneğin, kullanıcı metni seçtiğinde, fare tıklaması belgeye eklenmiş bir dinleyici tarafından fark edilir. Bu, yukarıdaki kodu kullanan bir açılır pencereyle sonuçlanır.

Zor PopUP pencere oluşturucu

Çeşitli web sitelerinin ve web uygulamalarının kullanıcıları, tarayıcılarını kullanırken sürekli olarak istenmeyen açılır pencerelerle karşı karşıya kalmaktadır. Tipik olarak, böyle bir PopUP penceresi "kapat" veya "iptal" işlevi kullanılarak kaldırılır. Bu tipik bir kullanıcı yanıtı olduğu için geliştiriciler bazı hileler uygulamaya başladılar. Yani geliştirirken reklam mesajları"kapat" veya "iptal et" seçeneğine benzeyen ekran düğmeleri veya kontrolleri oluşturulur. Ancak, kullanıcı bu seçeneklerden birini seçtiğinde, düğme beklenmeyen veya yetkisiz bir eylem gerçekleştirir (örneğin, yeni bir açılır pencere açmak veya kullanıcının sistemine istenmeyen bir dosya indirmek).

Web tasarım teknolojileri, yazarların her türlü "taklit" kullanmasına izin verdiğinden, bazı kullanıcılar açılır pencerenin içindeki herhangi bir öğeye tıklamayı veya bunlarla etkileşim kurmayı reddeder.

URL yönlendirmesi

Bazen URL'ler, Arka Plan URL'si yeniden yönlendirme özelliği kullanılarak reklam sayfalarına yönlendirilir. Bazen yeni bir sekmede açılırlar ve ardından eski arka plan sekmesinin içeriği, bir yönlendirme kullanılarak reklam sayfalarıyla değiştirilir. AdblockPlus, uBlock veya NoScript bu açılır yönlendirmeleri engelleyemez. Bu özellik, PopUP penceresini daha aktif hale getirmenin bir yolunu arayan reklam dağıtıcıları tarafından giderek daha fazla kullanılmaktadır.

Pop-up'lardan nasıl kurtulurum

Tarayıcıdaki reklamlar nasıl kaldırılır? Önce güncellemeleri kontrol edin. Tarayıcınızı güncel tutmak, pop-up'larla mücadelede uzun bir yol kat edecektir. Çoğu tarayıcı otomatik olarak güncellenecek şekilde ayarlanmıştır, ancak kapatılabilir. Bu işlem genellikle sadece birkaç dakika sürer.

• Firefox: Sol üst köşede uygulamanın adının bulunduğu düğmeye tıklayın. Yardım'ın üzerine gelin ve Firefox Hakkında'yı seçin. Bu, tarayıcı sürümü hakkında bilgi içeren bir pencere açacaktır. Tarayıcınız otomatik olarak indirilip kurulmazsa.
• Chrome: Sağ üst köşedeki menü düğmesini tıklayın. En alttaki "Chrome Hakkında"yı seçin, bu açılacaktır yeni sekme ve tarayıcı güncellemeleri kontrol edecektir. Varsa, otomatik olarak yüklenirler.
• Internet Explorer: Güncelleme yöntemi, kullandığınız tarayıcının sürümüne bağlıdır. Daha eski seçenekler için Merkez'de oturum açmanız gerekir. Windows güncellemeleri... Internet Explorer 10 ve 11 için etkinleştirebilirsiniz otomatik güncellemeler Dişli simgesine tıklayarak ve Internet Explorer Hakkında'yı seçerek.

Güncellemeler yardımcı olmazsa

Bazen bir site ve benzeri için bir PopUP penceresi yazılım bir güncelleme tarafından kaldırılamayacak kadar derine gömülü. Bu gibi durumlarda, web tarayıcınızı yeniden yüklemek veya değiştirmek sorunun çözülmesine yardımcı olabilir.

Önce indir En son sürüm kullanmak istediğiniz tarayıcı. İndirme linklerini adresinde bulabilirsiniz. ana sayfa her uygulama.

Bugün siteniz için kendi açılır pencerenizi nasıl oluşturacağınız hakkında konuşacağız. şimdi Bu methodçok popülerdir, ancak uygulanması için çözümlerin çoğu ödenir. Bir girişin içinde pek hoş olmayan bir pencere örneği (ancak bu sadece bir örnektir) ...

Bu yazıda, böyle bir açılır pencerenin nasıl yapıldığını öğreneceğiz. Basit, hızlı, etkili ve en önemlisi ücretsiz!

Herhangi bir açılır pencere temelde iki bölümden oluşur. Birincisi genel arka planı karartmak. İkincisi, pencerenin kendisidir. Pencere, sırayla, genellikle bir başlık, metin ve bir abonelik formuna bölünür. Belirtilen yapıyı göz önüne alarak penceremizin tabanını hazırlayalım.

Sahibiz:
fs_popup_bg- Siteyi karartma;
fs_popup- Pencerenin kendisi;
fs_popup_head- Pencere başlığı;
fs_content- Pencerenin içeriği iki bölüme ayrılmıştır;

Şimdi gerekli stilleri yazalım...

Açılır penceremizin stillerine hızlıca bir göz atalım.
#fs_popup_bg- arka planımızın siyah olacağını ve neredeyse saydam olmayacağını (0.9), sol üst köşede bulunacağını ve tüm ekran alanını kaplayacağını belirtir. Bu durumda, öğenin derinliği veya daha doğrusu diğer öğelerin üzerindeki yükselişi çok büyük olacaktır (tabii ki diğerlerinden daha fazla).
#fs_popup- pencerenin arka plandan bir seviye daha yüksek olacağını belirtir (aksi takdirde onu görmezdik). Köşeleri yuvarlatılmış ve kırmızı kenarlıklı 600 piksele 300 piksel olacaktır.
.fs_content_left, .fs_content_right- bize blokların sola doğru bastırıldığını (bunları aynı seviyeye yerleştirmeniz gerektiğini), girintileri ve Arial yazı tipi olduğunu söyler.

Penceremizi içerikle dolduralım:

Ve daha güzel bir görüntü için stillerimizi ekleyelim:

Prensip olarak hepsi bu. Örnekten de görebileceğiniz gibi, bir açılır pencere için JavaScript esasen iki durumda gereklidir:
1) Penceremizi kapatma olayı;
2) "Abone Ol" butonuna tıklandığında olay;
Bu pencerenin gösterilip gösterilmediğini kontrol etmenin de zararı olmaz. bu bilgisayar... Bu amaçlar için çerezlerle çalışmak oldukça uygundur.