Overlay, popup reklám, ami csak kattintás után tűnik el

El nem tüntethető reklám

Írta: Tupacko | 2010. április 07. | kategóriák: CSS, JavaScript, Speciális, Web

Kérésre érkezett ez a leírás, amiben bemutatok egy egyszerű trükköt, hogyan készíthetsz olyan popup (felugró) vagy overlay (eltakaró) reklámot, ami egészen addig nem tűnik el, amíg egy reklámra rá nem kattint az olvasó. Tudom, hogy nem szép dolog, de legyünk naívak és gondoljunk arra, hogy ennek akár jószándékú felhasználásai is lesznek.

Induljunk ki abból, hogy senki sem szereti, ha a már meglévő weboldalukat át kell írni egy kis ráncfelvarrásért. Fogjuk a már meglévő weboldalunk és írjuk be a body végére a reklámot tartó divet.

<body>
  <p>Tartalom</p>
  <div id="popupNoHideUntilClick" class="popupNoHideUntilClickClass">
    <a class="adLink" href="http://webpillango.org/" title="WebPillango">WebPillango</a>
  </div>
</body>

Ha ezzel megvagyunk, adjuk hozza a megfelelő CSSt, hogy a reklámunk eltakarja a valós tartalmat, illetve hogy a reklámot egy osztálycserével eltudjuk tüntetni (régi IE-k nem szeretik, ha a style elemüket babrálják, annál inkább, ha kicserélik a className változót, de majd hamarosan meglátod, miről is van szó).

.popupNoHideUntilClickClass {
  width:100%;
  height:100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #fff;
}
 
.hiddenElement {
  display: none;
  visibility: hidden;
  overflow: hidden;
  width: 0;
  height: 0;
}

Miután sikeresen beillsztettük a CSS részt is, mindössze be kell másolnunk a JavaScript-et és máris működik a dolog!

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
 
function hidePopup() {
  document.getElementById('popupNoHideUntilClick').className = "hiddenElement";
}
 
function initPopupNoHideUntilClick() {
  var links = document.getElementById('popupNoHideUntilClick').getElementsByTagName('a');
 
  for(var i=0; i < links.length; i++){
    if (links[i].className.indexOf('adLink') != -1) {
      links[i].target = "_blank";
      links[i].onclick = hidePopup;
    }
  }
}
 
addLoadEvent(initPopupNoHideUntilClick);

Természetesen az onLoad eseményre másként is ráköthetjük a reklámunkat kezelő függvényt, de próbáltam úgy elérni a kívánt eredményt, hogy a már meglévő onLoad események ne vesszenek el. Az addLoadEvent függvényt Simon írta. A működési elve egyszerű: megnézed, ha már van onLoad esemény. Ha még nincs ilyen esemény, akkor a kért függvényt csatolod rá. Ellenkező esetben készítesz egy új függvényt, ami meghívja az eddigi onLoad esemény függvényét, majd az újonnan rátett onLoad eseményt. Ezt az összetett függvényt pedig rácsatolod az onLoad eseményre.

A példa oldalt itt találod!

Értékeld a bejegyzést!

Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

Neved: kötelező

Emailed: kötelező, titok marad

Weboldalad: ha nincs, maradjon üres

Milyen nap van most?

Hozzaszólás:

Nálam nem történik semmi a példa oldalon. Mit kellene látnom?

taz 2010. április 7. - 22:23

Ha a webpillango linkre kattintasz, akkor az megnyilik egy uj ablaoban es eltunik a link, megjelenik egy szoveg: tartalom.

Tupacko
2010. április 7.
23:19

az addeventhandlerrel mi volt a baj?

Ertem en, hogy legyunk regi kompatibilisek, nade vazz, 2010 van.

(IE-ben mashogy hivjak, de ugyanugy tobb esemenyt lehet kezelni.)

Aadaam 2010. április 7. - 23:34

Ha nem haragszol, 2010ben is vannak, akik nemreg kezdek a szarnyukat probalgatni es ezert probaltam olyan kodot adni, ami az esetek tobbsegeben mukodik es nem kell a bongeszofuggetlensegen dolgozni. Plusz egy kis betekintest is ad, hogy mikent lehet fuggvenyekkel zsonglorkodni JavaScrioptben, ha eppen valaki ez iranyba szeretne elmozdulni Nyugodtan kicserelheted, amire szeretned az esemeny figyelo hozzaadasat, szamtalan modszer van. Ez az egyik.

Tupacko
2010. április 8.
07:11

jah… ez nagyon kegyetlen :S
DE király!!! XD

gr33n 2010. április 10. - 18:43

Ez de szemét! Nem kellett volna közzétenni! Most minden oldal használni fogja, ha még nem tette.

Bence 2010. április 13. - 20:34

Mellesleg VALAHOGY biztos ki lehet védeni. Max. nem nézed azt a lapot.

Bence 2010. április 13. - 20:46

Ketlem, hogy valaki, aki minimalis CSS es JavaScript tudassal rendelkezik, ne tudta volna ezt magatol is megirni. Egy jobaratom kert meg, hogy segitsek neki es en szivesen segitek Egyet se felj, nem fog most hirtelen megvaltozni a vilaghalo

Tupacko
2010. április 13.
21:48

Tudom, de néha paranoiásnak is kell lenni… Jaj, paranoia! :

Bence 2010. április 14. - 14:15

Szerintem jó, bár attól függ mire akarjuk használni. Pl. Google Adsensére semmiféle képen se, mert lesz vagy napi 1000 kattintás és kitesz a Google mindenestül. De arra, hogy egyik másik weboldalunkra ilyen módon vigyünk látogatást, arra szerintem tökéletes, bár én még raknák hozzá egy sütit, hogy a szerencsétlen látogatónak, minden frissítés után, ne kelljen a linkre kattintania. Mikor a szavazás volt akkor is nekem mindig megjelent az ablak hogy szavazz, őszintén szólva a végére, már kezdet bosszantani, hisz, direkt szavazni jöttem, mindig.

AutóHifi 2010. május 5. - 14:41

Pedig a szavazasnal volt suti, hogy legyen kevesbe zavarobb Sajnos voltak paran, akiknel megis megjelent, tobbszor.