Egyszerű css popup

Egyszerű css popup

jan 13, 2020 | Sandbox

Kerestem egy egyszerű popup megoldást, ami csak css, nem kell hozzá semmi JS. Természetesen, így nem lehet cookie-khoz rendelni, de néha csak egy kis infóablak kell.

Prakash anyagai között találtam egy letisztult, egyszerűt. Szépsége, hogy csak css kell hozzá, oldalon belüli ugrással, és az ehhez tartozó :target formázással működik. Ezt másoltam át ide.

 

Ami viszont Divi alatt sajnos nem működik. Ebben a rendszerben saját js kód elkerülhetetlen, mert a :target nem használható (az oldalon belüli azonosítókhoz finomgörgetés visz át).

Ezért aztán egy frappáns mozdulattal érdemes telepíteni a Popups for Divi kiegészítőt, ami megoldja a legtöbb feladatot. A weboldalukon mintaanyag is található, hogyan lehet megszólítani JS-ből, és ezt hogy lehet beágyazni.

Ezen az oldalon a következő popup ablakok szerepelnek:

  • Egy popup erre a linkre kattintva jelenik meg
  • Egy popup megnyílik a lap teljes betöltése után 5 másodperccel
  • Egy popup egy sütit tárol el, két nap elévüléssel, és csak akkor jelenik meg, ha ez a süti nincs jelen

Később még más megoldásokat is megnézek.

Infósor a sütiről.

Legutóbbi bejegyzések

React-bootstrap minta

React-bootstrap minta

Egy Youtube-videó alapján Találtam egy érdekes youtube-videót, amiben nulláról épít fel a fejlesztő egy minimális react-bootstrap felületet Érdekesebb elemek:  react-app -ot használ react-bootstrap, bootstrap styled-components, hogy a fájlon belül szerkeszthesse a...

Egy React progi Dockerben: YourPlaces

Egy React progi Dockerben: YourPlaces

Végy egy kis React-programot Milyen lépések vezetnek oda, hogy a külvilág számára éljen egy program, mondjuk a node1.webhely.hu címen? Egy online anyag során készített mintaprogramot kicsit átalakítottam. A kiinduláshoz szerencsére nem kellett túl sokat hozzányúlni,...

Egyszerű Node.js chat

Egyszerű Node.js chat

Andrew Mead remek Node.js Udemy-tanfolyamából merítve egy kicsit továbbfejlesztettem a chat-alkalmazást A rendszer githubra megy, onnan automatikusan Herokura építi újra magát. A felhasználó belépéskor választhat egy tetszőleges szobanevet. Itt láthatjuk az aktív...

Galériába régi képek

Galériába régi képek

Feltöltöttem néhány érdekes képet a galériába. Teljesen önkényesen összeválogatott néhány kép, a fotózásaim legkülönbözőbb területeiről. Illetve... nem csak fotókat találhatsz itt. Történt ugyanis, hogy 2016-17-ben terveztük kiegészíteni mozgóreklámokkal egy...

Három kis JS progi

Végigrágtam magam egy érdekes JavaScript online tanfolyamon, ami során három egyszerű kis JS programot készítettünk el. Notes: egyszerű szövegelemeket tudsz felrögzíteni, jegyzetfüzetként működik. A jegyzeteket a böngésző LocalStorage-területére menti, így...