0 Kč s DPH

Jak přidat pop-up okna na stránku

Výraz pop-up se v současnosti používá především pro samostatná vyskakovací okna, které často otevírají různé webové stránky např. k zobrazování reklamy. V tomto článku si ukážeme, jak sami takové pop-up okno v systému inPage vytvořit.

Na začátek je důležité říct, že tato praxe je všeobecně pokládána za velmi rušivou a obtěžující pro uživatele; moderní kvalitní webové prohlížeče lze nastavit tak, že zobrazování vyskakovacích oken automaticky blokují, a mnoho uživatelů tuto blokaci má opravdu nastavenou. Na druhou stranu je to dnes nedílná součást reklamy, a pokud zvolíme rozumný kompromis, můžeme návštěvníka našich webových stránek nasměrovat nenápadně tam, kam v rámci své reklamní kampaně potřebujeme.

VYVARUJTE se použití tohoto prvku pro tzv. vstupní stránky, většinou s logem společnosti a velikým napistem VSTUPTE. Logiku to nemá a návštěvníka to jen zdržuje, protože se musí prokliknout o odkaz dál. Vstupní stránka je vždy zkrátka naprostá zbytečnost.

Jak tedy vytvořit vlastní pop-up okno? Vystačíme s běžným HTML kódem, trochou javascriptu a koláčky (cookies). Přihlašte se do admistrace inPage a najděte si článek, který je označen jako Titulní stránka webu. Do něj uložte (přes funkci WYSIWYGu Upravit HTML zdroj) jeden z následujících kódů.

1. Nepovinný vyskakovcí pop-up

Takový pop-up se zobrazí návštěvníkovi vašich stránek při prvním zobrazení stránky, a poté (díky cookies) bude již skrytý. Zároveň ale pop-up neblokuje ostatní odkazy na stránce.

<script type="text/javascript" src="/js/jquery/jquery.cookie.js"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
$('#pop-up-close').click(function() {
$('#pop-up-box').hide();
return false;
});

    if ($.cookie('myweb_inpage_cookie') === null) {
$.cookie('myweb_inpage_cookie', '1');
        $('#pop-up-box').show();
}
});
// ]]>
</script>

<div class="nodisplay" id="pop-up-box">
<a href="/eshop/">Nejlevnější boty teď s AKČNÍ slevou 50%!</a>
<a href="#" id="pop-up-close">zavřít</a>
</div>

Názorný příklad takového pop-upu najdete zde.

2. Povinný vyskakovcí pop-up

Tento pop-up se také zobrazí návštěvníkovi vašich stránek pouze při prvním zobrazení stránky, ale skryje a zneaktivní další prvky na stránce.

<script type="text/javascript" src="/js/jquery/jquery.cookie.js"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
$('#pop-up-close').click(function() {
$('#pop-up-box').hide();
return false;
});  

 if ($.cookie('myweb_inpage_cookie') === null) {
$.cookie('myweb_inpage_cookie', '1');
$('#pop-up-box').show();
}
});
// ]]>
</script>

<div class="nodisplay" id="pop-up-box">
<a href="/eshop/">Nejlevnější boty teď s AKČNÍ slevou 50%!</a>
<a href="#" id="pop-up-close">zavřít</a>
</div>
<div class="overlay"></div>

Názorný příklad takového pop-upu najdete zde.

3. Vstup pouze pro dospělé!

Máte-li na svých stránkách obsah nevhodný např. pro osoby mladší 18-ti let, je dobré vstup na takovou stránku (web) podmínit potvrzením, že návštěvník je starší 18-ti let. Pokud tomu tak nebude, dotaz bude přesměrován na neškodnou stránku.

<script type="text/javascript" src="/js/jquery/jquery.cookie.js"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
 if ($.cookie('myweb_inpage_cookie') === null) {
$('body').hide();

if (confirm('Je vám opravdu více než 18 let?')) {
$.cookie('myweb_inpage_cookie', '1');
$('body').show();
} else {
$(window.location).attr('href', 'http://www.myweb.cz');
}
}
});
// ]]>
</script>

Pro své potřeby případně přepiště název cookie (zde myweb_inpage_cookie na dvou místech), adresu, kam uživatele přesměřovat v případě, že mu je méně než 18 let (zde http://www.myweb.cz) nebo také text otázky (zde Je vám opravdu více než 18 let?).

Názorný příklad takového pop-upu najdete zde.


Pavel Kašpar
pavel.kaspar(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • http://vyzvaneni.shopceny.cz/pop.html

    30.5.2014 21:13:51 | Vyzvánění

    Super. Dekuji.

    Odpovědět

inPage.cz - webové stránky, doména a webhosting snadno.