Hozzon létre egy egyszerű modális ablak segítségével jquery, javascript
Ebben a cikkben megnézzük, hogyan lehet létrehozni egy egyszerű felugró HTML:
Először hozzon létre egy alap HTML-jelölést modális ablak és nyitott linkek:
A fenti kód, hoztunk létre egy linket. Aztán létrehoztunk egy nagyon pop-up, ha rákattint a HTML link.
A következő lépésben meg kell adni egy modális ablak stílusok:
Mielőtt a pop-up HTML-ben. Továbbra is hozzá JQuery. úgy, hogy az jelenik meg, ha rákattint a linkre, és található a képernyő közepén:
Először válassza ki az összes tag A name = "modális". majd kivonja a link href. Ezt követően, hogy a szélessége és magassága a képernyő, hogy tegyen egy felugró ablak közepén.
Ne felejtsük el, hogy csatlakoztassa a jQuery könyvtár. egyébként HTML pop-up ablak nem fog működni:
Minden készen áll, és a mi egyszerű JQuery modális ablak kell működnie.
beállítása a cookie-kat
Ha nem szeretné, hogy a pop-up ablak jelenik meg minden alkalommal az oldal betöltésekor, majd a cookie-kat. Ehhez hozzon létre egy új fájlt nevű popup.js. Ez tartalmazni fogja az összes JS és JQuery kódot. Először add createCookie () függvény azt. readCookie () és eraseCookie ():
Akkor meg kell változtatnunk a kódot JQuery HTML pop-up ablakot a szöveget, és tegyük egy függvény nevű myPopup ():
Mint látható, már eltávolították .Kattintásokra () függvényt. mivel ez nem jelenik meg, hogy ellenőrizzék a külső függvény. Azt is eltávolították e.preventDefault (). Ezért nem fogjuk használni ezt a linket, hogy megjelenjen a modális ablakot.
Miután hozzá ezt a négy funkciót popup.js fájlt. hozzá kell adni az utolsó darab a JQuery kódot. amely bezárja a pop-up ablakban HTML.
Minden készen áll. Nézzük kísérletezni funkciók és gondoskodik arról, hogy a modális ablak csak egyszer jelenik meg minden 7. napon. Ehhez létrehozunk egy változót nevű popup. amely beolvassa a cookie-kat a nevét felugró:
Ezután hozzon létre egy tervezetet, ha mást. hogy ha van a cookie-kat. Ha igen, akkor nem csinál semmit. Ellenkező esetben adja meg a hurok, létrehozhatnak sütiket 7 napig, és megjelenik egy pop-up ablak, amikor rákattint egy HTML link:
Ez az! Van végre egy egyszerű süti rendszert. Most már kivehetjük a következő része a HTML-kódot. ha az általunk használt cookie-kat:
Fordítása a cikk «hozzon létre egy egyszerű jQuery modális ablak» készítettünk egy csapat barátságos Web design projekt tól Z-ig