Modális ablak CSS és jQuery

Beszél a különféle technikáit site épület, abszurd lenne, hogy ne meséljek néhány módon lehet létrehozni modális ablakok. Kinevezésére, közüzemi és problémák merültek a pop-up, modális ablakok, nem fogunk vitatkozni. Nézzük csak egy példa a sok közül, a teremtés az ilyen ablakok.

Vannak olyan helyzetek, amikor nem tudja használni speciális plug-inek, így például a fancybox és PrettyPhoto. ezért szükséges, hogy megértsük, hogyan lehet létrehozni saját modális ablakot.

Lássuk, hogyan kell csinálni:

Kezdje hozzáadásával tag a következő tulajdonságokkal rendelkezik:

href -? # w = 500 azt jelzi, a szélessége az ablak
rel - egyedi attribútumot minden ablakot
class = „poplight” - az osztály, hogy megjelenjen a felugró ablakban

Lásd Ablak akció -. Szélesség = 500px

Ezután létre kell hoznunk egy beépített jelölést a pop-up ablakot. Hely bárhol lehet az oldalon, nos, például az alsó a tartalmat. Megjegyezzük, hogy az azonosító pop-up ablak, hogy a rel attribútum tag

Ez fog kapcsolódni a linkre, és a pop-up ablakban együtt.

header

Bármilyen szöveges szíved vágyait

És így, a végeredmény a mi ablakot az oldalon, úgy gondoltuk, nézzük díszítjük stílusok Adjunk neki, hogy úgy mondjam, egy tisztességes kilátás.

CSS Positioning

A jobb áttekinthetőség érdekében, Rendeltem néhány magyarázat a paramétereket a stílusa ablakot. Mivel a pop-up mérete változhat, mi határozza meg a CSS popup_block szélén az ablakon, hogy számoljuk ki a szükséges méretet, ez a feladat jQuery.

A formáció az ablakon, és a megjelenését CSS segítségével, azt hiszem, túl sok a probléma nem jelentkezik. Stílusok lehet regisztrálni közvetlenül a HTML-oldal, a címkék között és . és tedd egy külön fájlban a stílus, általában style.css fájlt. vagy valami ilyesmi.

Beállítása JQuery

Ahhoz, hogy megtekinthesse ezt a modális ablakot, akkor kell csatlakoztatni a jQuery, akik nem ismerik a munkáját a könyvtár tudja olvasni jQuery - BEVEZETÉS.

Nos, megy tovább. Akkor töltse le a legújabb verzióját jQuery könyvtár helyén, vagy használja a Google Hosted mélyén egy fájlt, ha azt csatlakoztatja a dokumentumot, a részben a zárás előtt . helyezi a sort:

Tehát van szükségünk egy plug-in van, akkor ez is csatlakozhat egy oldalt, mind ugyanazon a helyen, mielőtt a címke :

A következő lépésben, úgy tölteléket és jquery plugint funkciókat aktiválni a pop-up ablak, a kód tartalmaz némi magyarázatot, hogy jobban megértsék, mit teszünk.

JQuery plugin,

következtetés:

Legközelebb biztosan mondani, és azt mutatják, példát, hogyan kell hozzáadni egy modális ablak görgetősáv. és az biztos, hogy sok lesz érdekelt, hogy megtudjuk, az integráció a kapcsolati formák, és egyéb harmadik fél helyek a pop-up ablakban. Tehát ne vesszenek el az interneten, és stay tuned!

Ez minden! Remélem, hogy egy értékes leckét.

Mind hálás, ha a támogatás a projekt - hozzátéve egy blogot AdBlock kivételek, és osztoznak a linket egy rekord a társadalmi hálózatok:

Kapcsolódó cikkek

előző ◈ a következő