Lightboxová vstupní stránka ihned po načtení
Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.
V dávných dobách měl každý správný web vstupní stránku s odkazem na hlavní web. Dnes jde k tomu využít JavaScript.
Jak jednoduše vytvořit lightboxové vyskakovací okno ihned po načtení stránky.
Taková věc nemusí být jen bezúčelným otravným prvkem, ale může dávat i smysl v případech jako:
- upozornění na nějakou významnou událost na stránce,
- upozornění na speciální obsah,
- reklama.
Jak na to?
Lightbox
První možnost je použít nějaký lightbox skript — třeba Magnific Popup ihned po načtení stránky (ukázka).
$.magnificPopup.open({
items: [
{
src: $('<div class="popup">Vstupní vyskakovací okno</div>'),
}
]
});
Jako obsah (tj. do src
) je možné umístit obrázek, HTML kód (jako na ukázce) nebo odkaz na jinou HTML stránku.
Vlastní řešení
Druhá možnost je si potřebný efekt z lightbox skriptu vytvořit ručně. V podstatě stačí jen obrázek/element vycentrovat a po kliknutí ho zavřít změnou třídy + vytvořit částečně průhledný element, co překryje původní obsah.
Vstupní stránka
Vlastní vyskakovací obsah ihned po načtení.
(Okno se automaticky otevírá při načtení stránky.)
Komentáře