JQuery modális ablak – mire való és hogyan kell telepíteni

Tartalomjegyzék:

JQuery modális ablak – mire való és hogyan kell telepíteni
JQuery modális ablak – mire való és hogyan kell telepíteni
Anonim

A kérdésedre adott válasz megtalálásához időnként sok időt kell töltened, különösen, ha a webdizájnnal kapcsolatban egy ilyen ügyekben nem különösebben jártas személy úgy döntött, hogy létrehoz egy webhelyet. egyedül. Egy jquery modális ablak lehet egy ilyen gyötrelmes feladat.

Nagyon sok ilyen ablakot találsz az interneten. Úgy tűnik, csak másolnia kell őket, és be kell illesztenie őket a webhelyére… Azonban nem minden olyan egyszerű. Szerencsére van egy részlet, ami mindent lelassít, és lehetetlen megoldani a feladatot, mert nincs ehhez szükséges tudás. Ezért ahelyett, hogy azonnal megzavarna egy modális ablakot a jQuery-n sok érdekes, nehezen megvalósítható funkcióval, jobb, ha egy kicsi, legegyszerűbb modális ablakkal kezdi, minden felesleges probléma nélkül.

Ha valahol van blog a wordpress-en, akkor minden nagyon egyszerű, és általában nincsenek nehézségek, mivel már sok kész megoldás van - különféle előugró modulok. De vannak teljesen eltérő lehetőségek is, ahol magának kell „faragnia” egy modális ablakot, vagy a fizetős szakemberek szolgáltatásaihoz kell fordulnia. Mint tudják, senki nem akar fizetni, különösen akkor, ha úgy tűnik, hogy csak a dolog végére kell jutnia, és minden gyorsan kiderül, ésteljesen ingyenes.

Egy jquery modális ablakra van szükség az oldalon lévő információkkal együtt járó és azokat kiegészítő tartalom megjelenítéséhez.

jQuery – mi az?

A teljes megértés érdekében, ha valaki nem ismeri, akkor a jquery egy JavaScript-könyvtár, ez utóbbi pedig egy olyan kódrészletet jelent, amely egy weboldal kódjába van ágyazva, és lehetővé teszi, hogy különböző effektusok, amelyek nem valósíthatók meg HTML-ben és CSS-ben. Tipikus példa egy ilyen kódrészletre az oldalon megjelenő aktuális dátum vagy idő.

A könyvtár fejlesztői hivatalos weboldallal rendelkeznek, amely folyamatosan javul és frissül, amelyhez kapcsolódóan minden új verzió új könyvtárakat kínál.

A jquery jelzésére, hogy szüksége van erre vagy arra a hatásra, létezik egy stíluslapokkal rendelkező CSS-nyelv.

CSS nyelv

A CSS jelentése lépcsőzetes stíluslapok. Ma már lehetetlen olyan webhelyet találni az interneten, amely nem használja ezt a nyelvet.

Ennélfogva a modális ablakokban a jquery és a CSS szinte nélkülözhetetlen és nélkülözhetetlen. Ezért, ha a jquery nincs benne, akkor ezt kell tennie.

Ehhez a következőt kell beilleszteni a head címkébe:

jQuery
jQuery

Mire valók a modálisok?

Egy egyszerű jquery mód, amely a webhely betöltésekor jelenik meg, hasznos lehet több követő megszerzéséhez. Az oldal megnyílásakor megjelenik az ablak. Nem nagyon elvonja a figyelmet, és nem valószínű, hogy megijeszt senkit, mivel a legkisebb kellemetlenség esetén is könnyűbezárul, és a bezárás gombon cookie-k lesznek, és ha rákattint, az eltűnt modális ablak nem jelenik meg újra.

Előugró ablak

A jquery felugró ablak, amely oldalanként csak egyszer jelenik meg, a modális ablakok változata.

A megvalósításához számos lépést kell tenni.

Speciális beépülő modulokat használhat a modális ablakokhoz. A legjobb, ha letölti őket olyan fejlesztői webhelyekről, mint az arcticModal. A következőképpen kapcsolódik:

jQuery modális ablak
jQuery modális ablak

Ablakstílus nélkül az egyik szabványos bővítménytéma így fog kinézni:

jQuery egyszerű modális ablak
jQuery egyszerű modális ablak

Ezután a cookie-bővítmény csatlakoztatva van:

jQuery modális ablak
jQuery modális ablak

A felhasználó számára információkat biztosító HTML-kód írása:

jQuery modális ablak
jQuery modális ablak

A kódban megadott arctimonial-close osztály azt jelenti, hogy a jQuery modális ablak bezárul vele.

Ezután jön a végső forgatókönyv:

jQuery előugró mód
jQuery előugró mód

Egyes használt paraméterek a következőket jelentik:

closeOnOverClick: meghatározza, hogy az ablak bezárul-e, ha a fedvényre kattintanak.

CloseOn Esc: azt jelenti, hogy az Esc-re kell kattintani.

Lejárat: Meghatározza azt az időt, ameddig a cookie tárolásra kerül. A javasolt változatban ez az idő hatvan nap lesz, vagyis két hónapig nem jelenik meg az ablak. A cookie minden látogatáskor frissül.

Tanulja meg, hogyan kell telepítenijQuery modális ablak az oldalon, szükség esetén áttérhet a bonyolultabb lehetőségekre. Ehhez különféle CSS-stílusokat adunk hozzá, és az ablak teljesen más lesz, mint a többi webhely modális ablaka.

A fantázia és a fantázia az ilyen megoldásoknak köszönhetően jelentősen növeli az előfizetők számát, az online áruházakba ügyesen behelyezett modális ablakok pedig sokszorosára növelhetik az eladásokat. Ezért a programozásra és windows telepítésre fordított idő indokolt lesz és mindenképpen megtérül!

Modális ablakok típusai

A modális ablakok felugróak lehetnek, ha rákattint a megfelelő gombra, vagy az oldallal együtt tölthetők be, és a betöltés után azonnal megjelenhetnek. Előfordulhat, hogy bezáráskor egy ideig már nem jelennek meg, ha cookie van beállítva, mint a fent leírt példában, vagy megjelenhetnek az oldal minden egyes betöltésekor. Vannak olyan modális ablakok, amelyek egy helyen rögzítve maradnak az oldalon történő mozgások ellenére is, és dinamikusak lehetnek, ha az ablak hivatkozással tartalmaz információkat, és a felhasználó áthalad rajta. Ekkor csak az ablak frissül, az eredeti oldal pedig változatlan marad.

Ajánlott: