# Modálműveletek és modul megnyitása modálként

> Modális ablak megnyitása és bezárása műveletekkel, és lépésről lépésre: modul előkészítése, beágyazása és négy megnyitási módja.

A két modálművelet lehetővé teszi, hogy egy modul egy másik modult felugró ablakként nyisson meg az oldal fölött, majd be is zárja. Így egy galéria, egy kapcsolatfelvételi űrlap vagy egy videó anélkül jelenhet meg az aktuális oldalon, hogy a látogató elnavigálna onnan.

A művelet felvételéhez a műveleti módban kattints az **Új művelet hozzáadása** gombra, és a **Típus** listában a **Modális ablak** csoportból válassz. Az **Esemény**, a **Trigger** és az **Időzítés** általános beállításait az [oldalsávról szóló fejezet](https://hub.hellowp.io/hu/plugins/revslider/akciok-akcio-oldalsav/) írja le.

## Modális ablak megnyitása

A **Modális ablak megnyitása** megadja, melyik modul nyíljon meg felugró ablakként, és mi indítsa el.

![A Modális ablak megnyitása panel](./kepek/akciok-modal-megnyitas.webp)

*A Modális ablak megnyitása panel* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1)

A **Modális ablak** szakasz két beállítása:

| Beállítás | Mit csinál |
| --- | --- |
| **Modul kiválasztása** | A megnyitandó modul. A telepítés bármelyik modulja választható, előtte semmit nem kell rajta bekapcsolni. A lista kereshető, és minden modul neve után zárójelben a típusa áll. |
| **Dia kiválasztása** | A kiválasztott modul azon diája, amellyel a modál megnyílik. A lista a **Modul kiválasztása** értékéből töltődik fel, ezért üres marad, amíg nem választasz modult. |

Az **Időzítés** szakaszban a **Késleltetés** az esemény és a modál megnyílása közti várakozás ezredmásodpercben. A `0` azonnal nyit.

## Modális ablak bezárása

A **Modális ablak bezárása** megadja, melyik megnyitott modált zárja be, és mi indítsa el. Leggyakrabban a modálként megnyitott modulban lévő bezárógombon használod.

![A Modális ablak bezárása panel a modullistával](./kepek/akciok-modal-bezaras.webp)

*A Modális ablak bezárása panel a modullistával* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1)

A **Modális ablak** szakasz **Modul kiválasztása** listájában a konkrét modulok mellett két olyan elem is van, amely név nélkül zárja be, ami éppen nyitva van:

| Választás | Mit zár be |
| --- | --- |
| **Összes megnyitott modális ablak** | Minden modált, amely éppen nyitva van. |
| **Aktuálisan fókuszban lévő modális ablak** | Azt a modált, amelyik éppen fókuszban van. |

Az **Időzítés** szakasz **Késleltetése** a bezárás előtti várakozás.

## Modul megnyitása modálként: lépésről lépésre

Bármelyik modul használható modálként. Először elő kell készíteni (bezárógomb, opcionális beállítások), aztán a modálra jellemző módon be kell ágyazni egy bejegyzésbe vagy oldalra, végül kiválasztani, hogyan nyíljon meg.

### 1. A modál modul előkészítése

Nyisd meg a modált a szerkesztőben, és kövesd a lépéseket.

**Bezárógomb hozzáadása**

1. Tervezési módban a **Hozzáadás** oldalsávval vegyél fel egy réteget, amely bezárógombként szolgál. Nem kell tényleges gombrétegnek lennie, lehet ikon, szöveg vagy bármi, amit szeretnél. Egy csoport is jó, benne szöveg- és ikonrétegekkel.
2. Ha a modál modulnak több diája lesz, a bezárógombot a **Statikus dia** felületére tedd, hogy mindig elérhető legyen.
3. Jelöld ki a gomb rétegét, váltsd át a szerkesztőt műveleti módba, és kattints az **Új művelet hozzáadása** gombra.
4. Az új művelet paneljén kattints a **Típus** mezőre.
5. A legördülőben válaszd a **Modális ablak bezárása** elemet.
6. A **Modul kiválasztása** értékét ne módosítsd: hagyd az alapértelmezett, kijelöletlen állapotban, így a bezárás a modul önmagára vonatkozik.

**Modálbeállítások (nem kötelező)**

A modálmodulok további beállításai a felső sávon, a **Beállítások** gombbal elérhető **Modálként való használat** panelen vannak. Itt állíthatod, hogy az oldal görgethető marad-e, amíg a modál nyitva van, megadhatsz egyéni osztályt az oldal `<body>` elemének, és beállíthatod az animációt és a stílust. A panel minden beállítását a [Modálként való használat panel](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-panelek-modal/) fejezet írja le.

### 2. Beágyazás modálként

Miután a modul kész, a bejegyzésbe vagy oldalra a modálra jellemző módon kell beágyaznod: rövidkóddal vagy Slider Revolution blokkal.

**Beágyazás rövidkóddal**

1. A felső sávon kattints a **Közzététel** gombra.
2. A beágyazási ablakban másold ki a modál rövidkódot.
3. Illeszd be a rövidkódot a bejegyzésbe vagy az oldalra.

Ügyelj rá, hogy a modál rövidkódot ágyazd be, ne a szokásosat: különben a modul közvetlenül az oldalon jelenik meg, nem rejtve várja a megnyitást.

**Beágyazás blokkal**

1. A bejegyzésben vagy oldalon vegyél fel egy Slider Revolution blokkot.
2. Válaszd ki a modál modulodat.
3. A kijelölt blokk jobb oldalsávjában lépj a **Blokk** fülre, és nyisd ki a **Használat modálként** szakaszt.
4. Kapcsold be a **Modul beszúrása modálként (felugró ablak)** kapcsolót.

A blokk modálbeállításait az [A Slider Revolution blokk](https://hub.hellowp.io/hu/plugins/revslider/elso-lepesek-slider-revolution-blokk/) fejezet részletezi.

### 3. A megnyitás módjai

Az előkészített és beágyazott modált négyféleképpen nyithatod meg:

- másik modulból;
- automatikus felugrással;
- események alapján;
- URL-hash-sel.

**Megnyitás másik modulból**

Bármelyik modul megnyithat modált: egy nyitógombra van szüksége, és ugyanazon az oldalon kell lennie, ahol a modál.

1. Tervezési módban vegyél fel egy réteget nyitógombnak. Ez is bármilyen rétegtípus lehet, például egy „Galéria megnyitása” gomb.
2. Jelöld ki a gombot, váltsd át a műveleti módra, és kattints az **Új művelet hozzáadása** gombra.
3. A **Típus** mezőre kattintva válaszd a **Modális ablak megnyitása** elemet.
4. Kattints a **Modul kiválasztása** mezőre, és válaszd ki a modál modult a listából.
5. Kattints a **Dia kiválasztása** mezőre, és add meg, melyik dia jelenjen meg elsőként a modál megnyitásakor.
6. Ágyazd be a nyitó modult is ugyanabba a bejegyzésbe vagy oldalra, de most a szokásos módon (a modál módú beágyazás helyett). Rövidkóddal: a **Közzététel** ablakban a szokásos rövidkódot másold be ugyanoda, ahol a modált beágyaztad. Blokkal: vegyél fel egy másik Slider Revolution blokkot, és válaszd ki a nyitó modult.

Ha mindkét modul be van ágyazva, a nyitó modul gombjára kattintva megjelenik a modál.

**Automatikus felugrás**

A modál az oldal meglátogatásakor magától is felugorhat: munkamenetenként egyszer, bizonyos idő eltelte után, vagy ha a látogató egy megadott pozícióig legörgeti az oldalt. Ez a módszer a modált blokkal beágyazva működik.

1. Jelöld ki a modál modul blokkját, és a jobb oldalsávon a **Blokk** fülön nyisd ki a **Használat modálként** szakaszt.
2. Kapcsold be a **Munkamenetenként 1 alkalom**, az **Idő elteltével megjelenő felugró ablak** vagy a **Felugró ablak a görgetési pozíciónál** kapcsolót.
3. Állítsd be a választott kiváltó további beállításait.

**Felugrás események alapján**

Ha a modált az oldalon kívülről, saját JavaScripttel akarod megnyitni:

1. Jelöld ki a modál modul blokkját, és a **Blokk** fülön nyisd ki a **Használat modálként** szakaszt.
2. Kapcsold be a **Felugró események alapján** kapcsolót.
3. Másold ki a megjelenő eseménynevet, és használd a kódodban.

Például a `popup_Oceanview-Villa-Gallery-Modal` esemény a következő paranccsal indítható:

```js
document.dispatchEvent(new Event("popup_Oceanview-Villa-Gallery-Modal"));
```

**Felugrás URL-hash-sel**

A modált megnyithatod úgy is, hogy a modul aliasát hash-ként az oldal állandó hivatkozásának végére fűzöd. Ha a böngészőben ezt a címet nyitják meg, a modál felugrik.

1. Jelöld ki a modál modul blokkját, és a **Blokk** fülön nyisd ki a **Használat modálként** szakaszt.
2. Kapcsold be a **Felugró ablak URL-hash esetén** kapcsolót.
3. A **Modulinformáció** szakaszból másold ki az **Alias** értékét.
4. Fűzz egy `#` jelet és az aliast az oldal állandó hivatkozásához, így megkapod a felugrást kiváltó címet.

Ez a hash beágyazott hivatkozásokban is használható, így egyszerű szöveges hivatkozás is megnyithatja a modált az oldalon.