@hunsziszi/modal-popup

v1.0.5

Published

a month ago

Lightweight helper to show HTML or remote pages inside Bootstrap modals (iframe or inline content).

0High
0Medium
0Low

hunsziszi

modal popup bootstrap iframe modal-popup

modal-popup

Kis, könnyű JavaScript segédlet Bootstrap 5 modális ablakokhoz. Lehetővé teszi inline HTML vagy távoli oldal (iframe) megjelenítését; egyszerű API-val irányítható megnyitás/bezárás és alapvető beállítások.

Követelmény: Bootstrap 5 (CSS + JS bundle) szükséges a modális működéséhez.

Telepítés

Nyilvános package név (scoped):

npm install @hunsziszi/modal-popup

vagy helyileg importáld a modalPopup.js fájlt, ha nem használod a csomagot.

Gyors beállítás (Bootstrap 5 CDN)

Példa HTML (Bootstrap 5 szükséges):

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <button id="open-inline" class="btn btn-primary">Inline megnyitás</button>
    <button id="open-iframe" class="btn btn-secondary">Iframe megnyitás</button>

    <script type="module">
      import { ModalPopup } from '@hunsziszi/modal-popup';

      // Inline HTML példa
      const inlinePopup = new ModalPopup('Inline példa', '<p>Ez egy inline tartalom</p>', { width: '600px' });
      document.getElementById('open-inline').addEventListener('click', () => inlinePopup.open());

      // Iframe (remote) példa
      const iframePopup = new ModalPopup('Távoli oldal', null, { width: '80%', height: '70vh' });
      iframePopup.setSrc('https://example.com');
      document.getElementById('open-iframe').addEventListener('click', () => iframePopup.open());
    </script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Default import és global attach

Ha egyszerűbb importot szeretnél használni, a csomag default exportot is kínál:

import ModalPopup from '@hunsziszi/modal-popup';

new ModalPopup('Egyszerű import', '<p>Default import példa</p>').open();

Az attachToWindow segítségével opcionálisan felteheted a ModalPopup-ot egy globális névtérre (pl. window.App vagy window):

import { attachToWindow } from '@hunsziszi/modal-popup';
attachToWindow('App'); // vagy attachToWindow('global') a window.ModalPopup-hoz

// Automatikus attach meta tag segítségével:
// <meta name="modal-popup-auto-attach" content="1">

Alapfunkciók és API

Részletes API — mit csinál minden publikus függvény

Az alábbi lista a modalPopup.js ben található publikus metódusokra és azok viselkedésére vonatkozik. Minden, ahol értelmezett, chainable (this-t ad vissza).

Konstruktor: new ModalPopup(title = "", html = "", config = {})
- Létrehoz egy új példányt a megadott alapbeállításokkal, beállítja az alapértelmezett konfigurációt, generál egy azonosítót, és előkészíti a belső állapotot.
getID()
- Visszaadja a modal DOM elemének id-ját (ha létrehozva).
getIframeID()
- Visszaadja az iframe DOM elemének id-ját (frame_<modal-id>), ha iframe módban van.
setWidth(width)
- Beállítja a modal szélességét (pl. '80%', '600px'). Azonnal frissíti a konfigurációt.
setHeight(height)
- Beállítja a modal magasságát (pl. '70vh', '500px').
setSrc(url)
- Beállítja a remote forrást (src) — ha meg van adva src, a popup iframe módban fog működni. A get_params és force_get_params alapján query stringet állít össze.
setTitle(text)
- Beállítja a modal fejlécben megjelenő címsort.
setHtml(html)
- Beállítja az inline HTML tartalmat, ha nem iframe módban használjuk.
setOnOpen(func)
- Beállít egy callbacket, ami a modal megnyitása után fut le (shown.bs.modal eseménykor).
setOnBeforeOpen(func)
- Beállít egy callbacket, ami a modal megjelenése előtt fut le (show.bs.modal eseménykor).
setOnClose(func)
- Beállít egy callbacket, ami a modal teljes bezárása után fut le (hidden.bs.modal eseménykor). A callback a modal objektum kontextusában hajtódik végre.
setOnBeforeClose(func)
- Beállít egy callbacket, ami a modal bezáródása előtt fut le (hide.bs.modal).
setGetParams(obj)
- Beállítja a get_params objektumot, majd újraépíti a modal src-át (query string). Hasznos iframe GET-kérésekhez.
setPostParams(obj)
- Beállítja a post_params objektumot; ha érvényes (nem üres JSON), a popup POST módban fog iframe-et létrehozni, azaz a tartalom POST-tal fog betöltődni egy dinamikus formon keresztül.
setBackdrop(value)
- value lehet 'static' (mellékattintás nem zárja), vagy true/false — beállítja a Bootstrap data-bs-backdrop attribútumot.
setKeyboard(value)
- Engedélyezi vagy tiltja az Escape billentyűvel történő bezárást (Bootstrap data-bs-keyboard).
setFocus(value)
- Ha true, a modal megnyitása után a .modal-content elem fókuszt kap.
setClassModal(string), setClassModalDialog(string), setClassModalContent(string), setClassModalHeader(string), setClassModalTitle(string)
- Ezekkel további CSS osztályokat adhatsz a modal különböző részeihez (pl. fade, modal-dialog-centered).
setAutoCsrfToken(bool)
Ha true, akkor a #generateForm() metódus automatikusan megpróbálja felismerni és hozzáadni a CSRF token mezőt (Laravel/CodeIgniter4 meta tag-ek vagy cookie alapján). Ezáltal POST iframe-kérések CI4/Laravel kompatibilisek lesznek.
setForceGetParams(obj) / setForcePostParams(obj) / forcePostParams(obj)
- Kötelezően hozzáadandó paraméterek, amelyek minden GET vagy POST kéréshez hozzá lesznek fűzve. (forcePostParams a hátsó kompatibilitás miatt is elérhető.)
open()
- Létrehozza a modal DOM struktúráját (#createPopupContainer()), hozzáadja a dokumentumhoz, regisztrálja a Bootstrap eseménykezelőket (show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal) és megjeleníti a modal-t. Ha iframe POST módban van, beágyaz egy űrlapot és automatikusan elküldi.
close()
- Lekéri a Bootstrap modal példányt és meghívja a hide() metódust, amely elindítja a bezárási folyamatot és a későbbi cleanup-ot.
Privát segédmetódusok (belső működés):
- #processUrl() — összeállítja az iframe src-át a src + get_params + force_get_params alapján.
- #checkIframeMode() — eldönti, hogy iframe-re van-e szükség (ha src megadott), és beállítja a POST/GET módot a post_params alapján.
- #regenID(force) — generál véletlen id-t a modalhoz, ha szükséges.
- #createPopupContainer() — létrehozza a valódi DOM struktúrát (modal, dialog, content, header, body), és ha iframe módban van, beilleszti az iframe-et és a POST-űrlapot.
- #generateForm() — rekurzívan legenerálja a hidden input mezőket a post_params/force_post_params objektumokból (tömböket, beágyazott objektumokat is kezeli), amit iframe POST betöltéshez használ.
- #remove() — eltávolítja a modal DOM elemet a dokumentumból és kitakarítja a weakmap bejegyzést.

Példa: láncolható inicializáció és megnyitás

Licence

MIT — lásd a LICENSE fájlt.

<a href="#" data-modal-src="/terms.html" data-modal-title="Általános Szerződési Feltételek" id="terms">ÁSZF</a>
<script type="module">
  import { bindDataAttributes } from '@hunsziszi/modal-popup';
  bindDataAttributes();
  // bindDataAttributes automatikusan kattintásra megnyitja a modal-t a data- attribútumok szerint
</script>

Telepítés és tesztelés lokálisan

Telepítés:

npm install

Csomag ellenőrzése:

npm pack

Lokális telepítés egy teszt mappába:

npm pack
npm install .\\modal-popup-*.tgz --prefix ..\\tmp-install

Publish megjegyzések

Scoped csomag esetén (@username/package) publikus kiadáshoz futtasd: npm publish --access public.
Ha 2FA vagy granuláris access token van beállítva, előfordulhat, hogy újra be kell jelentkezned (npm login) vagy friss token kell.

Hozzájárulás

Ha találsz hibát vagy szeretnél új funkciót javasolni, nyiss egy issue-t vagy pull request-et a GitHub tárolóban.

Licence

MIT — lásd a LICENSE fájlt.

modal-popup

Kis, egyszerű JavaScript segédlet Bootstrap modális ablakokhoz. Megjeleníthetsz inline HTML-t vagy távoli oldalt iframe-ben (GET/POST).

Telepítés

npm install modal-popup

Gyors példa

<script type="module">
  import { ModalPopup } from 'modal-popup';

  const popup = new ModalPopup('Cím', '<p>Szia világ</p>');
  popup.open();
</script>

API

new ModalPopup(title, html, config) - létrehoz egy példányt
láncolható setterek: setHtml(), setWidth(), setSrc() stb.
open() - megnyitja a modalt
close() - bezárja a modalt

Részletes használat lásd a forrás kommentjeiben.

Publish

Frissítsd a package.json mezőit (name, version, author, repository).
Jelentkezz be: npm login
Lokálisan ellenőrizd: npm pack
Publikálás: npm publish --access public

Licence

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

modal-popup

Telepítés

Gyors beállítás (Bootstrap 5 CDN)

Default import és global attach

Alapfunkciók és API

Részletes API — mit csinál minden publikus függvény

Licence

Telepítés és tesztelés lokálisan

Publish megjegyzések

Hozzájárulás

Licence

modal-popup

Telepítés

Gyors példa

API

Publish

Licence