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.)
Související články
Jak udělat input s automatickou šířkou podle obsahu
Několik způsobů, jak dosáhnout toho, aby se textové pole rozšiřovalo a zužovalo podle délky zadaného textu.
CSS @starting-style
Jak animovat elementy při jejich prvním zobrazení pomocí at-pravidla @starting-style.
