# Modális felugró ablak widget

> A Modális felugró ablak tartalma, videó beágyazása, a bezáró gomb és a bezárás módjai.

A **Modális felugró ablak** widget felugró ablakot hoz létre. Megjelenhet magától, vagy szövegre, ikonra, képre, gombra vagy bármelyik másik elemre kattintva. Az ablakban lehet szöveg, kép, videó, mentett szekció vagy mentett oldal.

## Tartalom

A **Tartalom** szakasz beállításai:

| Beállítás | Mit csinál |
|---|---|
| **Modális felugró ablak előnézete** | Bekapcsolva a szerkesztőben látod, hogyan fog kinézni az ablak. |
| **Cím** | Az ablak címe. |
| **Tartalomtípus** | Mi jelenjen meg az ablakban (lásd lent). |

A tartalomtípusok: tartalom, kép, videó beágyazási kódja, mentett szekció, mentett oldal, YouTube, Vimeo és iFrame.

![A Modális felugró ablak Tartalom szakasza YouTube tartalomtípussal](./kepek/tartalom-modal-tartalom.webp)

*A Modális felugró ablak Tartalom szakasza YouTube tartalomtípussal* (https://minta-bolt.hu/wp-admin/post.php?post=25&action=elementor)

A képen a **Tartalomtípus** YouTube-ra van állítva, így a videóhoz tartozó mezők látszanak.

## A felugró ablak kinézete

A **Modális felugró ablak** szakaszban három dolgot állíthatsz:

- **Modális felugró ablak szélessége**: csúszkával, mértékegységgel (például px), eszközönként külön.
- **Modális megjelenési effektus**: az ablak megjelenésekor lejátszódó animáció.
- **Fedvény színe**: a háttér és az ablak tartalmi dobozának színe. A fedvény az egész oldalt beborítja az ablak mögött.

![A Modális felugró ablak szakasz szélesség, effektus és szín beállításokkal](./kepek/tartalom-modal-felugro.webp)

*A Modális felugró ablak szakasz szélesség, effektus és szín beállításokkal* (https://minta-bolt.hu/wp-admin/post.php?post=25&action=elementor)

A tartalom belső margóját (**Tartalom belső margója**) mértékegységgel és eszközönként külön lehet megadni.

## Videó a felugró ablakban

Négyféleképpen tehetsz videót az ablakba. Mindegyiknél a **Tartalomtípust** kell átállítanod.

### Videó beágyazási kódja

Válaszd a **Videó beágyazási kódja** típust, és illeszd be a videó beágyazási kódját. Az URL is megfelel.

### YouTube

1. A **Tartalomtípus** legyen **YouTube**.
2. A **Videó-URL** mezőbe a videó tényleges webcímét írd, például `https://www.youtube.com/watch?v=azonosito`. A megosztási webcím (`https://youtu.be/azonosito`) nem jó.

További beállítások:

| Beállítás | Mit csinál |
|---|---|
| **Képarány** | A videó képaránya. |
| **Automatikus lejátszás** | A videó magától elindul. |
| **Kapcsolódó videók innen** | A videó végén ajánlott videók: az **Aktuális videócsatorna** vagy bármelyik véletlen videó. A javaslatokat teljesen kikapcsolni nem lehet. |
| **A lejátszó vezérlőinek kikapcsolása** | Elrejti a lejátszás, szünet, hangerő és hasonló gombokat. |

A videó címét külön beállítás rejti el.

### Vimeo

A **Tartalomtípus** legyen **Vimeo**, és másold be a videó webcímét. A Vimeónál bármilyen webcímforma jó, csak a megfelelő videót másold. Itt a **Képarány** és az **Automatikus lejátszás** állítható.

### iFrame

A **Tartalomtípus** legyen **iFrame**, és írd be a keret webcímét. A keret magasságát a lenti beállítással adhatod meg.

- YouTube esetén a `watch?v=` helyett `embed/` kell: a `https://www.youtube.com/watch?v=8WkuChVeL0s` helyett `https://www.youtube.com/embed/8WkuChVeL0s`.
- Vimeónál a beágyazási kódban látható webcím kell: a `https://vimeo.com/channels/staffpicks/257776764` helyett `https://player.vimeo.com/video/257776764`.

## Bezáró gomb

A **Bezáró gomb** szakaszban állíthatod be, hogyan zárhatja be a látogató az ablakot.

![A Bezáró gomb szakasz](./kepek/tartalom-modal-bezaro.webp)

*A Bezáró gomb szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=25&action=elementor)

A képen a bezáró ikon és a lenti kapcsolók láthatók.

| Beállítás | Mit csinál |
|---|---|
| **Bezárás típusa** | A bezáró elem kép vagy ikon. Képnél feltöltheted a képet és megadhatod a méretét. Ikonnál az ikont, a méretét és a színét állítod. |
| **Kép / ikon pozíciója** | Hol jelenjen meg: **Ablak - bal felső**, **Ablak - jobb felső**, a felugró ablak bal vagy jobb felső sarkában, vagy az ablak szélén a bal vagy jobb felső sarokban. |
| **Bezárás ESC lenyomására** | Az Esc billentyű bezárja az ablakot. |
| **Bezárás a háttérre kattintva** | A fedvényre kattintva bezáródik az ablak. |

## Bezárás saját gombbal vagy szöveggel

Ha az ablak tartalmában is legyen egy gomb vagy szöveg, ami bezárja, add neki az `uael-close-modal` osztályt.

1. A **Tartalom** szakaszban a **Tartalomtípus** legyen **Tartalom**.
2. A szerkesztő **Szöveg** (HTML) fülén írd be a kódot, és a bezáró elemre tedd rá az osztályt.

Szövegre kattintva zár:

```html
<span class="uael-close-modal">Vásárlás folytatása</span>
```

Gombra kattintva zár:

```html
<button type="button" class="uael-close-modal">Bezárás</button>
```

Bármelyik másik HTML-elemmel is működik, ha megkapja az osztályt.