Lightboxová vstupní stránka ihned po načtení

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.