# Modális ablakok widget

> Felugró ablak készítése saját tartalommal vagy sablonnal: tartalom, eseményindítók, animációk, háttérréteg és stílusbeállítások.

A **Modális ablakok** widget felugró ablakot jelenít meg az oldalon. Az ablak tartalma lehet közvetlenül beírt szöveg vagy egy Elementor-sablon. Azt is megadhatod, mi nyissa meg: az oldal betöltése, egy gomb, a görgetés vagy a widget elérése. A widgetnek négy szakasza van a **Tartalom** fülön (**Tartalom**, **Beállítások**, **Animációk**, **Átfedés**), a kinézetet pedig a **Stílus** fülön állítod.

## Tartalom

![A Modális ablakok widget Tartalom szakasza](./kepek/modalok-tartalom.webp)

*A Modális ablakok widget Tartalom szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=57&action=elementor)

Figyeld meg a **Tartalomtípus** választót és a szerkesztőt: a típustól függ, mit kell kitöltened.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Modális ablak előnézetének mutatása szerkesztési módban | A szerkesztőben is megjeleníti az ablakot, hogy lásd, mit szerkesztesz. Ha több modális widget van az oldalon, kapcsold ki, mert az előnézet eltakarhatja a többi elemet. | Igen |
| Tartalomtípus | **Tartalom**: az ablak szövegét közvetlenül a widgetben írod. **Sablon**: egy meglévő Elementor-sablon lesz az ablak tartalma. | Tartalom |
| Sablon | Sablon típusnál ezt a sablont jeleníti meg az ablak. | |
| Modális ablak tartalma | Tartalom típusnál a szerkesztőben írod be az ablak szövegét. Dinamikus címkét is használhatsz. | |

## Beállítások: az eseményindító

Az **Eseményindító** határozza meg, mikor jelenjen meg az ablak. Négy lehetőség van, és a szakasz többi mezője ettől függ.

| Eseményindító | Mikor jelenik meg az ablak |
| --- | --- |
| **Oldal betöltésekor** | Az oldal betöltése közben. |
| **Gombra kattintáskor** | Amikor a látogató a widget gombjára, vagy az általad megadott másik elemre kattint. |
| **Oldal görgetésekor** | Miután a látogató a megadott számú képpontot legörgette az oldalon. |
| **A widget pozíciójánál** | Amikor az oldal görgetésekor a widget helye eléri a látogató képernyőjét. |

### Oldal betöltésekor

![A Beállítások szakasz oldalbetöltéses indítással](./kepek/modalok-beallitasok-oldalbetoltes.webp)

*A Beállítások szakasz oldalbetöltéses indítással* (https://minta-bolt.hu/wp-admin/post.php?post=57&action=elementor)

A **Beállítások** címsor alatt az ablak bezárásának és megjegyzésének beállításai vannak. Ugyanezek jelennek meg a **Oldal görgetésekor** és a **A widget pozíciójánál** indításnál is.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Elrejtés görgetéskor | Elrejti az ablakot, amikor a látogató görgeti az oldalt. | Nem |
| Elrejtés az ESC megnyomásakor | Elrejti az ablakot az ESC gomb megnyomásakor. | Igen |
| Cookie-k használatának mellőzése | Ha **Igen**, az ablak minden oldalbetöltéskor megjelenik, cookie-ra való tekintet nélkül. | Nem |
| Cookie neve | A cookie neve, amelyből az ablak megtudja, hogy a látogató már látta. Egyedinek kell lennie, különben a webhely összes modális ablakára hatással lesz. Csak betű, szám és aláhúzásjel használható. | modals_accepted |
| Cookie beállítása bezáráskor | Ha **Igen**, a cookie az ablak bezárásakor jön létre. Ha **Nem**, a widget csak ellenőrzi a cookie-t, de nem hozza létre: ez akkor hasznos, ha a cookie-t te állítod be kézzel. | Igen |
| Cookie lejárata | A cookie élettartama napokban. A 0 azt jelenti, hogy a cookie csak addig él, amíg a böngésző nyitva van. | 0 |

A cookie miatt a látogató az ablakot a bezárás után nem látja újra, amíg a cookie él. Ha minden betöltéskor látni szeretnéd (például fejlesztés közben), kapcsold be a **Cookie-k használatának mellőzése** kapcsolót.

### Oldal görgetésekor

![A Beállítások szakasz görgetéses indítással](./kepek/modalok-beallitasok-gorgetes.webp)

*A Beállítások szakasz görgetéses indítással* (https://minta-bolt.hu/wp-admin/post.php?post=57&action=elementor)

A **Görgetési elmozdulás** mezőben azt adod meg, hány képpontot kell legörgetni az oldalon, mielőtt az ablak megjelenik. A többi beállítás megegyezik az oldalbetöltéses indításéval.

### Gombra kattintáskor

![A Beállítások szakasz gombos indítással](./kepek/modalok-beallitasok-gomb.webp)

*A Beállítások szakasz gombos indítással* (https://minta-bolt.hu/wp-admin/post.php?post=57&action=elementor)

Ennél az indításnál a widget egy gombot jelenít meg az oldalon, a gombra kattintva nyílik meg az ablak. A cookie-beállítások ilyenkor nem jelennek meg.

| Beállítás | Mit csinál |
| --- | --- |
| Más elemek bevonása | Bekapcsolva az oldal más elemei is megnyithatják ezt az ablakot (lásd lent). |
| Gomb típusa | **Szöveg**, **Kép** vagy **Hamburger**. |
| Szöveg | A gomb felirata. Szöveg típusnál jelenik meg, dinamikus címkével is megadható. |
| Ikon | Ikon a szöveges gombon. Az Elementor ikonkészletéből vagy saját SVG-ből választhatsz. |
| Kép | Kép típusnál ezt a képet mutatja a gomb. |
| Hamburger típusa | Hamburger típusnál a gomb alakja: **X**, **Nyíl balra**, **Nyíl jobbra** vagy **Esés**. |
| Gomb célja | Eldöntheted, hogy a widget egyszerű cselekvésre ösztönző gomb legyen-e egy másik modális ablakban. Ilyenkor ez a widget nem hoz létre saját ablakot. |
| Elrejtés görgetéskor | Elrejti az ablakot görgetéskor. |
| Elrejtés az ESC megnyomásakor | Elrejti az ablakot az ESC gombra. |

Ha egy másik elemmel szeretnéd bezárni az ablakot, adj neki `.dce-button-close-modal` CSS-osztályt.

#### Más elemek bevonása

![A Más elemek bevonása kapcsoló bekapcsolva](./kepek/modalok-beallitasok-mas-elemek.webp)

*A Más elemek bevonása kapcsoló bekapcsolva* (https://minta-bolt.hu/wp-admin/post.php?post=57&action=elementor)

Ha a **Más elemek bevonása** be van kapcsolva, az oldal más elemei (például egy menüpont vagy egy gomb) is megnyithatják az ablakot. Két mező jelenik meg:

- **Szelektorok**: az elemek CSS-szelektora jQuery-formátumban, például `#name, .button`.
- **Korlátozás a Loop Itemre**: bekapcsolva a többi elem keresése csak az aktuális Loop Itemre korlátozódik. Ez akkor hasznos, ha a widget egy ismétlődő elemben (Loop) van.

## Animációk

![Az Animációk szakasz](./kepek/modalok-animaciok.webp)

*Az Animációk szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=57&action=elementor)

Itt a megnyitás és a bezárás animációját állíthatod be.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Tolás | Bekapcsolva az oldal tartalmát is eltolja az ablak megnyitásakor (a body burkolóelemét mozgatja). | Nem |
| Tartalom burkolója | Tolás esetén ide írd az oldal fő tartalmának azonosítóját. Például az OceanWP témánál `#wrap`, az Astránál `#page`. | #wrap |
| Tartalom mozgásának animációja | Tolás esetén két további választó jelenik meg: az egyik a megnyitáskor, a másik a bezáráskor lejátszott mozgást adja meg. | |

A **Megnyitási animáció** és a **Bezárási animáció** csoport mezői azonosak:

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Stílus | Az animáció fajtája: **Nincs**, **Halványítás**, **Bal**, **Jobb**, **Felül**, **Alul**, **Távolodó nagyítás**, **Közelítő nagyítás**, vagy különböző **Átfordítás** (balra, jobbra, felfelé, lefelé). | Megnyitásnál **Felül**, bezárásnál **Alul** |
| Időzítési függvény | Matematikai függvény, amely megadja, hogyan változik az animáció sebessége az idő során (például **Lineáris**, **Ease**, **Ease In Out**). | Ease In Out |
| Sebesség | Az animáció hossza másodpercben. | 0,6 |
| Késleltetés (ms) | Megnyitásnál az animáció indulásának késleltetése ezredmásodpercben. | 0 |

## Átfedés

![Az Átfedés szakasz](./kepek/modalok-atfedes.webp)

*Az Átfedés szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=57&action=elementor)

Az átfedés az ablak mögötti, az oldalt eltakaró réteg.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Átfedés | Átfedő réteget jelenít meg, amíg az ablak látható. | Igen |
| Háttér típusa | **Klasszikus** (szín vagy kép) vagy **Színátmenet**. Klasszikusnál képet is választhatsz, színátmenetnél egy második színt. | |
| Átlátszatlanság | A réteg átlátszatlansága, reszponzív. | |
| Modális ablak bezárása a háttérrétegre kattintva | Bekapcsolva a háttérre kattintva bezárul az ablak. | Nem |

## Stílus

A **Stílus** fülön három szakasz van: **Modális ablak**, **Gomb** és **Bezáró gomb**.

### Modális ablak

![A Stílus fül Modális ablak szakasza](./kepek/modalok-stilus-ablak.webp)

*A Stílus fül Modális ablak szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=57&action=elementor)

| Beállítás | Mit csinál |
| --- | --- |
| Vízszintes igazítás | Az ablak vízszintes helye: balra, középre vagy jobbra. |
| Függőleges illesztés | Az ablak függőleges helye: alulra, középre vagy felülre. |
| Szélesség, Magasság | Az ablak mérete. |
| Kiterjesztés teljes ablakra | Az ablak a teljes böngészőablakot kitölti. |
| Padding, Margó | Belső és külső térköz. |
| Tipográfia, Szöveg színe | Az ablakban lévő szöveg betűtípusa és színe. |
| Háttérszín | Az ablak háttérszíne. |
| Szegély típusa, Keretsugár, Dobozárnyék | Szegély, lekerekítés és árnyék. |

### Gomb

Ez a szakasz a **Gombra kattintáskor** indításnál megjelenő gomb kinézetét adja: színek (normál és rámutatáskor), igazítás, tipográfia, padding, szegély, keretsugár és dobozárnyék.

### Bezáró gomb

![A Stílus fül Bezáró gomb szakasza](./kepek/modalok-stilus-bezaro.webp)

*A Stílus fül Bezáró gomb szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=57&action=elementor)

A **Bezáró gomb** kapcsolóval bekapcsolhatod az ablak bezáró gombját. A **Bezárás típusa** szerint a gomb négyféle lehet:

- **X**: kereszt alakú gomb.
- **Ikon**: választott ikon.
- **Kép**: saját kép.
- **Szöveg**: szöveges gomb, a feliratot te adod meg.

Az **X** típusnál a következőket állíthatod: **X színe** és **Háttérszín** (normál és rámutatáskor), **Szegély típusa**, **Gomb mérete**, **Bezárójel vonalvastagsága**, **Bezárójel mérete (%)**, valamint az **Y pozíció** és az **X pozíció**. Más típusnál az ikon vagy szöveg színét, a háttérszínt, a méretet, a keretsugarat, valamint a margót és a paddingot állíthatod. A margónál negatív értékkel a bezáró gombot az ablakon kívülre is kiteheted.

## Hogyan néz ki az oldalon?

![Az oldal a demó gombokkal](./kepek/modalok-oldal-zarva.webp)

*Az oldal a demó gombokkal* (https://minta-bolt.hu/modalis-ablakok-demo/)