# Felugró ablakok

> A felugró ablak építő: sablon létrehozása, feltételek, beállítások, interakciók, korlátok, töréspontok, bezárás, JavaScript, AJAX és példák.

A felugró ablak építővel teljesen egyedi felugró ablakokat hozhatsz létre a Bricks-ben. A felugró ablak egy **Felugró ablak** típusú Bricks-sablon. A Bricks az élő oldalon legyártja a felugró ablak HTML-jét, alapból rejtve tartja, és interakciókkal vagy JavaScripttel nyitja és zárja.

Felugró ablakot használhatsz modális ablakokhoz, hírlevélűrlapokhoz, kilépési szándékú ajánlatokhoz, gyorsnézethez, térképi információs dobozokhoz és lekérdezési ciklusokban megjelenő kontextusfüggő tartalomhoz.

## Felugró ablak sablon létrehozása

Hozz létre új sablont, és válaszd a **Felugró ablak** sablontípust. Mentsd a sablont, majd szerkeszd a Bricks-szel.

A felugró ablak sablonok másként néznek ki, mint a normál oldalsablonok:

- a felugró ablak tartalma középre igazítva jelenik meg a vásznon,
- a **Sablonminta beállításai** között van egy **Felugró ablak** csoport,
- a sablon nem használja a **Tartalom kitöltése** beállítást.

A felugró ablak tartalmát ugyanúgy építed, mint bármely más Bricks-elrendezést: szakaszokat, tárolókat, űrlapokat, gombokat, ikonokat, képeket vagy dinamikus adatot adhatsz a vászonhoz.

## Elérhetőség és sablonfeltételek

A sablonfeltételek döntik el, hol jeleníti meg a Bricks a felugró ablak sablont. Nyisd meg a **Sablonminta beállításai → Feltételek** csoportot, és válaszd ki azokat az oldalakat, ahol a felugró ablaknak elérhetőnek kell lennie.

![A felugró ablak sablon beállítási panelje: a Felugró ablak csoport vezérlői](./kepek/sablonok-1-popup-beallitasok.webp)

*A felugró ablak sablon beállítási panelje: a Felugró ablak csoport vezérlői* (https://minta-bolt.hu/template/hirlevel-felugro-ablak/?bricks=run)

A képen a **Felugró ablak** csoport első vezérlői láthatók: **Padding**, **Főtengely igazítása**, **Kereszttengely igazítása**, **Bezárás ekkor**, **Z-index** és a görgetési kapcsolók.

Például a lábléc felől megnyitható hírlevél felugró ablaknak általában „Teljes webhely” feltétel kell. A termék-gyorsnézet felugró ablaknak elég lehet, hogy csak a bolt- vagy termékarchívum-oldalakon legyen elérhető.

Ha a felugró ablakot az aktuális oldalon nem jeleníti meg a Bricks, az interakció nem tudja megnyitni, mert nincs felugró ablak elem a DOM-ban. Ha egy oldalon az **Oldalbeállítások** között be van kapcsolva a felugró ablakok letiltása, a Bricks az oldal felugró ablakait nem rendereli.

Ugyanazon az oldalon több felugró ablak sablon is megjeleníthető.

## Felugró ablak beállításai

A felugró ablak beállításai a **Sablonminta beállításai → Felugró ablak** csoportban vannak. Globális alapértelmezéseket is megadhatsz a **Sablonstílusok** **Felugró ablak** vezérlőcsoportjában, a sablonbeállítások pedig egy adott felugró ablakra felülírják ezeket.

A fő beállítások:

- **Padding:** a felugró ablak burkolójának belső margója.
- **Főtengely igazítása** és **Kereszttengely igazítása:** a felugró ablak tartalmának elhelyezése a nézetablakban.
- **Bezárás ekkor:** választható a háttérrétegre kattintás, az ESC billentyű, a „Nincs”, vagy az alapértelmezett „Háttérréteg & ESC” viselkedés.
- **Z-index:** a felugró ablak rétegsorrendje.
- **Görgetés (body):** engedélyezi az oldal törzsének görgetését, amíg a felugró ablak nyitva van. Ha ki van kapcsolva, a Bricks `no-scroll` osztályt ad a törzsnek, amíg a felugró ablak nyitva van.
- **Görgetés a tetejére:** megnyitáskor a felugró ablak tartalmát az elejére görgeti.
- **Automatikus fókusz letiltása:** megakadályozza, hogy a Bricks a felugró ablak első fókuszálható elemére helyezze a fókuszt.
- **Automatikus fókusz kikapcsolása bezáráskor:** bezáráskor nem kerül fókusz az utoljára fókuszált elemre.
- **Információs doboz (Térkép):** kapcsold be, ha a felugró ablak sablon egy térkép „Info Box” eleméhez készült.
- **Tartalom lekérése AJAX-on keresztül:** a tartalmat a kezdeti DOM helyett igény szerint rendereli.
- AJAX-töltő: töltő animációt, és opcionálisan szelektort, színt és méretet választhatsz az AJAX felugró ablakokhoz.
- **Töréspontok:** megadja, mely töréspontokon jelenhet meg a felugró ablak.
- **Háttérréteg:** a háttérréteget állíthatod be vagy tilthatod le (**Háttérréteg letiltása**, **Háttér**, **Átmenet**).
- **Tartalom:** a `.brx-popup-content` burkolót stílusozhatod (belső margó, szélesség, magasság, háttér, szegély, dobozárnyék).
- **Felugró ablakok korlátja:** megszabhatod, milyen gyakran nyílhat meg.

Az élő oldalon a Bricks a billentyűzetfókuszt a nyitott felugró ablakon belül tartja, bezáráskor visszaállítja a fókuszt, a **Bezárás ekkor** beállításnak megfelelően támogatja az ESC- és háttérrétegre kattintásos bezárást, és JavaScript-eseményeket bocsát ki.

## Felugró ablak interakciói

A felugró ablak beállításpaneljén lejjebb az **Interakciók** csoport lehetővé teszi, hogy a felugró ablak eseményekre reagáljon. A felugró ablak sablonok interakciói ugyanazt az interakciórendszert használják, mint az elemek, kiegészítve két felugró ablak-specifikus kiváltóval:

- **Felugró ablak megjelenítése:** a felugró ablak megnyílása után fut le.
- **Felugró ablak elrejtése:** a felugró ablak bezárása után fut le.

Akkor használd ezeket, ha magának a felugró ablaknak kell követő műveleteket futtatnia: például animációt indítani, tárolóba írni, vagy másik elemet frissíteni, miután az ablak megnyílt vagy bezárult.

A legtöbb felugró ablakot egy másik elem interakciója nyitja. Például adj egy **Kattintás** interakciót egy Gombhoz, a Cél legyen **Felugró ablak**, válaszd ki a felugró ablak sablont, és használd az **Elem megjelenítése** műveletet.

Tipikus automatikus felugró ablak a **Tartalom betöltve** kiváltót használja.

Ha a felugró ablaknak nincs saját interakciója, és semmilyen más elem interakciója sem nyitja meg, a felugró ablak rejtve marad.

## A felugró ablak megnyitásának és bezárásának menete

Amikor a Bricks megnyit egy felugró ablakot, az élő oldalon ezt a folyamatot követi:

1. Megkeresi a felugró ablak elemét a sablonazonosító vagy az elemcsomópont alapján.
2. Ellenőrzi a felugró ablak korlátait.
3. Ellenőrzi a felugró ablak töréspontszabályait.
4. Eltávolítja a `hide` osztályt.
5. Hozzáadja a `no-scroll` osztályt a törzshöz, kivéve ha a törzs görgetése engedélyezett.
6. Lekéri az AJAX felugró ablak tartalmát, ha a felugró ablak AJAX-ra van állítva.
7. A lekért tartalmat beszúrja a `.brx-popup-content` elembe.
8. Kibocsátja a `bricks/ajax/popup/loaded` eseményt, csak a beszúrt AJAX-tartalomnál.
9. Kibocsátja a `bricks/popup/open` eseményt.
10. Növeli a felugró ablak számlálóit.

Bezáráskor a Bricks hozzáadja a `hide` osztályt, eltávolítja a `no-scroll` osztályt a törzsről, ha nincs más nyitva lévő, nem görgethető törzsű felugró ablak, és kibocsátja a `bricks/popup/close` eseményt.

Ez a menet az egyéni kódnál számít:

- A `bricks/ajax/popup/loaded` eseményre figyelj, ha a frissen lekért AJAX felugró ablak DOM-jára van szükséged.
- A `bricks/popup/open` eseményre figyelj, ha a felugró ablaknak nyitva kell lennie.
- A `bricks/popup/close` eseményre figyelj, ha bezárás utáni takarításra van szükséged.

## Felugró ablakok korlátja

Alapból a felugró ablak minden kiváltáskor megnyílhat. A **Sablonminta beállításai → Felugró ablak → Felugró ablakok korlátja** csoportban korlátozhatod, milyen gyakran nyílhat meg.

A Bricks a megnyitás előtt ellenőrzi a korlátokat. Ha egy korlát elérte a határt, a felugró ablak nem nyílik meg, és a megnyitás-esemény sem fut le.

Négy korlátvezérlő van:

| Korlát típusa | Böngészőtároló | Leírás |
|---|---|---|
| Oldalbetöltésenként | `window.brx_popup_{id}_total` | Az oldal újratöltésekor nullázódik. |
| Munkamenetenként | `sessionStorage.brx_popup_{id}_total` | A böngészőmunkamenet/lap tárolójának törlésekor nullázódik. |
| Munkameneteken át | `localStorage.brx_popup_{id}_total` | Addig marad, amíg a helyi tárolót nem törlik. |
| Mutasd újra .. óra múlva | `localStorage.brx_popup_{id}_lastShown` | Az utolsó megjelenítés időbélyegét tárolja, és a megadott számú óráig vár, mielőtt újra megnyithatóvá válik. |

Az oldalbetöltésenkénti, munkamenetenkénti és munkameneteken átívelő számlálók minden sikeres megnyitáskor nőnek. Az óraalapú beállítás a legutóbbi megjelenítés időbélyegét akkor tárolja, amikor a felugró ablak átment a korlátellenőrzésen.

## Felugró ablak töréspontjai

A töréspontbeállítások azt szabályozzák, hogy a felugró ablak megjeleníthető-e az aktuális nézetszélességnél.

A Bricks két módot támogat:

- **Megjelenítés kezdete ezen a törésponton:** a kiválasztott töréspont szélességétől felfelé jeleníti meg a felugró ablakot.
- **Megjelenítés ezeken a töréspontokon:** csak a kiválasztott töréspont-tartományokban jeleníti meg.

Ha az aktuális nézetablak nem felel meg a töréspontszabálynak, a Bricks nem nyitja meg a felugró ablakot.

## A felugró ablak bezárása

Többféleképpen zárhatsz be egy felugró ablakot:

- A **Bezárás ekkor** beállítással: háttérrétegre kattintás és/vagy ESC.
- Adj a felugró ablakon belül egy bezáró ikont vagy gombot, és adj neki **Elem elrejtése** interakciót, amely a felugró ablakot célozza.
- Használj újrahasználható bezáróelemet, amely a `.brx-popup` osztályt célozza.
- Hívd a `bricksClosePopup()` függvényt JavaScriptből.

### Példa: bezáró ikon a felugró ablakban

Adj egy **Ikon** elemet a felugró ablakhoz. Állítsd a kurzort mutatóra (pointer) a **Stílusok → Elrendezés → Egyebek** alatt.

Nyisd meg az Ikon elem **Interakciók** paneljét, és add hozzá:

- Kiváltó: **Kattintás**
- Cél: **Felugró ablak**
- Felugró ablak: az aktuális felugró ablak
- Művelet: **Elem elrejtése**

Ha ugyanazt a bezáró ikont különböző felugró ablakokban is használni akarod, hozd létre [komponensként](https://hub.hellowp.io/hu/plugins/bricks-child/sablonok-komponensek/). Ekkor használd:

- Cél: **CSS-szelektor**
- CSS-szelektor: `.brx-popup`
- Művelet: **Elem elrejtése**

## JavaScript segédfüggvények és események

A Bricks az élő oldalon felugró ablak segédfüggvényeket és egyéni eseményeket tesz elérhetővé.

### Felugró ablak megnyitása és bezárása JavaScripttel

A felugró ablakokat a `bricksOpenPopup` és `bricksClosePopup` függvényekkel nyithatod és zárhatod. Mindkettő felugró ablak sablonazonosítót vagy felugró ablak elemcsomópontot fogad:

```js
bricksOpenPopup(3321)
bricksClosePopup(3321)
```

```js
const popup = document.querySelector('.brx-popup[data-popup-id="3321"]')
bricksOpenPopup(popup)
bricksClosePopup(popup)
```

### Példa: felugró ablak megnyitása szelektorral

```js
document.querySelectorAll('.brxe-heading, .my-custom-selector').forEach((el) => {
  el.addEventListener('click', () => {
    bricksOpenPopup(3321)
  })
})
```

### Felugró ablak nyitási és zárási eseményeinek figyelése

A `bricks/popup/open` és `bricks/popup/close` eseményekkel kódot futtathatsz a felugró ablak megnyitásakor és bezárásakor.

```js
document.addEventListener('bricks/popup/open', (event) => {
  const popupId = event.detail.popupId
  const popupElement = event.detail.popupElement

  if (popupId == 3321) {
    console.log('3321 popup is opened')
  }
})

document.addEventListener('bricks/popup/close', (event) => {
  const popupId = event.detail.popupId
  const popupElement = event.detail.popupElement

  if (popupId == 3321) {
    console.log('3321 popup is closed')
  }
})
```

Használd az `event.detail.popupId` és `event.detail.popupElement` tulajdonságot. A tulajdonság neve `detail`, nem `details`.

## Felugró ablak lekérdezési cikluson belül

Lekérdezési cikluson belül is elhelyezhetsz felugró ablakot a **Sablon** elemmel. A felugró ablak sablonon belül a dinamikus adatok az aktuális ciklus-elemre hivatkozhatnak.

Tipikus példa: egy termék-lekérdezési cikluson belül egy „Gyorsnézet” gomb, amely interakcióval megjeleníti a kiválasztott gyorsnézeti felugró ablakot.

A Bricks újabb változataiban a lekérdezési ciklusos felugró ablakokhoz a Bricks ciklusspecifikus felugró ablak HTML-t tud építeni. Régebbi változatoknál ne a lekérdezési ciklus div elemén állítsd be az interakciót, hanem a ciklus-elemen belüli egyik elemen.

### Példa: ciklusos felugró ablak megnyitása a lekérdezési elem azonosítójával és a ciklusindexszel

Ha az oldalon már megjelent egy ciklusos felugró ablak, a lekérdezési elem azonosítójával és a ciklusindexszel célozhatod:

```js
document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    const queryId = 'vfiqrn'
    const targetPopup = document.querySelector(
      `.brx-popup[data-popup-loop="${queryId}"][data-popup-loop-index="7"]`
    )

    bricksOpenPopup(targetPopup)
  }, 200)
})
```

A kis késleltetés az egyéni kód elemekben azért hasznos, mert időt ad a Bricks frontend globális változóinak és a felugró ablak jelölésének az inicializálásra.

## AJAX felugró ablak

Az AJAX felugró ablakkal könnyebb marad a kezdeti DOM: a Bricks a felugró ablak tartalmát csak megnyitáskor kéri le. Kapcsold be a **Tartalom lekérése AJAX-on keresztül** beállítást.

Ez különösen lekérdezési ciklusokon belüli felugró ablakoknál hasznos, ahol az összes felugró ablak teljes tartalmának az oldal betöltésekor való rendereléséhez sok erőforrás kellene.

AJAX bekapcsolva:

- a felugró ablak burkolója megjelenik az oldalon,
- a `.brx-popup-content` a szerkesztő előnézetén kívül üresen indul,
- a Bricks a felugró ablak megnyitásakor a REST-végpontról kéri le a tartalmat,
- a visszaadott HTML-t és dinamikus CSS-t a `.brx-popup-content` elembe szúrja,
- további beágyazott felugró ablak HTML-t a törzshöz fűzhet, ha az AJAX-tartalom ciklusos AJAX felugró ablakokat tartalmaz.

Az AJAX felugró ablak renderelése bejegyzés-, kifejezés- és felhasználói kontextust támogat. Azt a dinamikus adatot, amelynek nincs stabil objektumazonosítója (például egyes ismétlő sorok), nem mindig lehet AJAX felugró ablak kontextusként feloldani.

### AJAX felugró ablak kontextusbeállítások

Amikor egy interakció felugró ablakot nyit, a Bricks kontextusvezérlőket kínál az AJAX felugró ablakokhoz. A Bricks megpróbálja automatikusan kikövetkeztetni az aktuális kontextust. Normál bejegyzés-, kifejezés- és felhasználói ciklusokban ez gyakran működik. Egymásba ágyazott lekérdezési ciklusoknál, komponenspéldányoknál, egyéni mező ismétlőknél vagy összetettebb dinamikus adatbeállításoknál az automatikus kontextus hibás vagy hiányzó lehet.

Ezeket a mezőket akkor használd, ha az AJAX felugró ablakban a dinamikus adat üresen vagy rossz objektumból jelenik meg:

- **Kontextus típusa:** Bejegyzés, Kifejezés vagy Felhasználó.
- **Kontextus azonosítója:** az objektum azonosítója, amelyhez a dinamikus adatot renderelni kell.

Használhatsz dinamikus adatot, például `{post_id}`, `{term_id}`, vagy olyan egyéni mező értéket, amely bejegyzés-, kifejezés- vagy felhasználóazonosítóra oldódik fel.

### AJAX felugró ablak megnyitása kontextussal JavaScriptben

A `bricksOpenPopup` három paramétert fogad:

- `object`: felugró ablak azonosítója vagy felugró ablak elemcsomópontja.
- `timeout`: a felugró ablak animációja/számlálója által használt időtúllépés ezredmásodpercben.
- `additionalParams`: az AJAX felugró ablak kontextusadata.

```js
bricksOpenPopup(
  1190,
  0,
  {
    popupContextId: 668,
    popupContextType: 'post'
  }
)

bricksOpenPopup(
  2350,
  0,
  {
    popupContextId: 39,
    popupContextType: 'term'
  }
)
```

A felhasználók számára ezeket a paramétereket általában az **Interakciók** panel kezeli. JavaScriptet akkor használj, ha egyéni szkriptből nyitsz felugró ablakokat.

### AJAX felugró ablak események

Az AJAX felugró ablakok három AJAX-specifikus eseményt bocsátanak ki:

- `bricks/ajax/popup/start`: az AJAX felugró ablak kérése előtt.
- `bricks/ajax/popup/end`: az AJAX felugró ablak kérésének befejezése után.
- `bricks/ajax/popup/loaded`: a lekért felugró ablak tartalmának a DOM-ba illesztése után.

Mindegyik esemény az `event.detail.popupId` és `event.detail.popupElement` értéket használja.

```js
document.addEventListener('bricks/ajax/popup/loaded', (event) => {
  const popupId = event.detail.popupId
  const popupElement = event.detail.popupElement

  if (popupId == 3321) {
    console.log('3321 AJAX popup content DOM loaded')
  }
})
```

Az AJAX felugró ablak megnyitásának sorrendje:

1. `bricks/ajax/popup/start`
2. `bricks/ajax/popup/end`
3. `bricks/ajax/popup/loaded`
4. `bricks/popup/open`

A `bricks/ajax/popup/loaded` csak akkor fut le, ha AJAX-tartalom kerül beszúrásra. A nem AJAX felugró ablakok a megnyitás után közvetlenül a `bricks/popup/open` eseményt bocsátják ki.

## Felugró ablak beállítási példák

### Példa: felugró ablak megjelenítése, amikor az egér elhagyja a böngészőablakot

A felugró ablak sablon és elrendezés létrehozása után nyisd meg a **Sablonminta beállításai → Felugró ablak** csoportot, görgess az **Interakciók** részhez, és adj hozzá egy **Egér elhagyja az ablakot** interakciót, amely megjeleníti a felugró ablakot.

Valódi kilépési szándékú felugró ablakhoz kombináld ezt felugró ablak korlátokkal vagy böngészőtároló-feltételekkel, hogy az ablak ne jelenjen meg túl gyakran.

### Példa: felugró ablak megjelenítése egy dátum/időpont előtt

A sablonfeltételek azt döntik el, hol érhető el a felugró ablak sablon. Az elemfeltételek azt, hogy a felugró ablak tartalma megjelenik-e.

Ha a felugró ablakot csak egy adott dátum előtt akarod megjeleníteni, adj **Elemfeltételt** a felugró ablak legkülső elemére. Ha a feltétel nem teljesül, a Bricks nem rendereli a felugró ablak tartalmát, és kihagyja a felugró ablak HTML-jét. Az ezt a felugró ablakot célzó kiváltónak így nincs megnyitható felugró ablak eleme az oldalon.

### Példa: felugró ablak megnyitása/bezárása kiváltóként

A felugró ablak sablon interakciói reagálhatnak a megnyitás vagy bezárás utáni eseményre. Például:

1. Nyisd meg a **Sablonminta beállításai → Felugró ablak → Interakciók** részt.
2. Adj hozzá egy **Felugró ablak megjelenítése** kiváltót.
3. A műveletet állítsd **Böngészőtároló: Számlálás** értékre.
4. Tárolj egy kulcsot, például `newsletter_popup_opened`.

Ezután máshol interakciófeltételekkel ellenőrizheted ezt a kulcsot, és módosíthatod az oldal viselkedését.