Modális ablakok homályos háttérrel a CSS3-on. Hozzon létre egy pop-up modális jquery jquery ablakot a fényerővel
A modális ablakok a modern webdesign szerves részét képezik, felhasználva, a fejlesztő az egyik oldalon az eltérési módot igényelheti, és nem dobja látogatót a segédoldalakra. Ebben a leckében megnézzük, hogyan lehet létrehozni csodálatos modális ablakok homályos hátteret a honlapon a jQuery és CSS3. Ezeknek a szabályoknak köszönhetően elmosódott hátteret fogunk létrehozni, amikor megjelenik az ablak, amely a látogató tekintetét csak a szükséges információkra adja.
Modális ablakok homályos háttérrel a CSS3-on
Gazdasági hírek A legjobb itt: Frakció
Az ablak animációja egy ilyen szólóba kerül telepítésre, hogy amikor megnyomja a CMOS-t, megjelenik a megjelenés, az ablak animálódik felülről az aljzatra, míg a háttér elmosódása automatikusan javul.
1. lépés HTML
Van egy konténerünk, amelyben található: cím, leírás, akkor hozzáadunk egy osztályt egy osztályhoz egy osztályhoz. togglemodal A modális ablak megnyitása:
Cím
Leírás
Az ablak címe
A fülek egy nagyon érdekes és kényelmes dolog olyan webhelyek létrehozására, ez lehetővé teszi, hogy megfelelően az információk, a mentés közben egy kis helyet az oldalon.
Akkor hozzá kell adnunk egy osztályt modális aktívEz az osztály felelős a modális ablak hívásához, modal__Header. Felelős a címért és a stilizációs ablakért.
2. lépés. CSS.
Thelery A stilizációra költözünk, az első lépés osztály lesz bettonmelyik arra fog válaszolni, hogy már kitalálta, hogy a webhelyen lévő gombok megadjuk a helyes megjelenítési paramétereket:
A stílusok meglehetősen egyszerűek, külön fájlokat tárolnak, és nem okozhatnak nehézségeket, amikor szerkesztik őket a fejlesztőtől, aki valaha találkozott CSS-vel.
3. lépés JS.
Az utolsó, de nem kevésbé fontos, az automatikus elmosódott háttér telepítése, amikor megjelenik a menü, valamint a hivatkozások kattintása, a kis szabályok segítenek nekünk JS.:
Ennek eredményeként csodálatos modális ablakokat kapunk, amelyek egy postparer tekintetét élvezik, és nem szívja el a designot.
Beszélgetés a különböző honlapmérnöki technikákról, nevetséges lenne, hogy ne mondd el a modális ablakok létrehozásának bizonyos módjait. Nem fogunk beszélni az előugró ablakok, modális ablakok használatának kinevezéséről, hasznosságáról és felmerülő problémáiról. Elemezzük csak az ilyen szélek létrehozásának számos példáját. Vannak olyan helyzetek, amikor nincs lehetőség a speciális bővítmények használatára, például, például, így érdemes megérteni, hogyan lehet létrehozni a sajátját.
Lássuk, hogyan kell csinálni:
Html
Kezdjük a címkék hozzáadásával a következő attribútumokkal:
href - #? w \u003d 500 Megadja az ablak szélességét
rel - egyedülálló attribútum minden ablakhoz
class \u003d "poplight" - osztály megjelenítése egy felbukkanó ablakban
<
a href=
"#?w=500"
rel=
"popup_name"
class
=
"poplight"
> Lásd az ablakot az akcióban - szélesség \u003d 500px
Lásd az ablakot az akcióban - szélesség \u003d 500px
Ezután létre kell hoznunk egy beépített jelölést az előugró ablakhoz. Bárhol elhelyezhető az oldalon, jól, például a tartalom alján. Ne feledje, hogy a felbukkanó ablak azonosítója megegyezik az attribútummal rel. Címke Ez társítja a linket és az előugró ablakot.
Cím
Bármilyen szöveg, amit a szíved
És így, a végeredmény a mi ablakot az oldalon rájöttünk, most nézzük hely, hogy a segítségével a stílusok, neki, hogy úgy mondjam, egy tisztességes kilátás.
CSS kenyér
A tisztaság fogyasztása érdekében néhány magyarázatot írtam az ablakunk stílusparamétereire. Mivel a pop-up különböző méretű lehet, nem adjuk meg a CSS-ben popup_block Az ablak szélei, kiszámítják a szükséges méretet, ez csak egy feladat.
Az ablak kialakulásával és a CSS-vel való megjelenésével, azt hiszem, nincsenek különleges nehézségek. A stílusok közvetlenül regisztrálhatók a HTML oldalon, a címkék között
és és a stílusok külön fájljává válhat, általában ez a fájl style.css., vagy valami ilyesmi.
Jquery beállítása.
A modális ablak teljes munkájához csatlakozni kell a jquery-t, aki nem ismeri meg a könyvtár munkáját.
Nos, tovább fogunk menni. A JQUIZER legújabb verzióját a könyvtár webhelyéről, vagy egy különálló fájlt használhat a belekben, csatlakoztatva a dokumentumhoz, a zárócímke előtti szakaszban
Az ilyen karakterlánc elhelyezésével:
A következő lépésben fontolja meg a JQuery plugin kitöltését és funkcióit, hogy aktiválja a felbukkanó ablakunkat, a kód néhány magyarázatot tartalmaz a jobb megértés érdekében, amit csinálunk.
Plugin jquery.
$ (Dokumentum). Kész (funkció () () () ( // Ha rákattint a linkre a Napfény és a href osztály attribútumcímke tól től # $ ("a.poplight"). Kattintson (funkció () (var popid \u003d $ (ez). Att ("rel"); // kapja meg az ablak nevét, fontos, hogy ne felejtsük el elfelejteni, ha új változtatási nevet adunk hozzá a rel attribútumban Var popurl \u003d $ (ez). Attr ("href"); // megkapja a href attribútumok méretét// a href url kérése és változók Var Query \u003d Popurl. Hasított ("?"); Var dim \u003d lekérdezés [1]. Hasított ("&"); VAR Popwidth \u003d Dim [0]. Split ("\u003d") [1]; // a lekérdezési karakterlánc első értéke// Adja hozzá a záró gombot az ablakhoz. $ ("#" + popid). Fadein (). CSS ("Szélesség": szám (popwidth))). Előkészítés ( ""
)
;
// Határozza meg a középső (függőleges és vízszintes) összehangolását (állomány) (függőleges és vízszintes) var popmargtop \u003d ($ ("#" + popid). magasság () + 80) / 2; var popmarleft \u003d ($ ("#" + popid). Szélesség () + 80) / 2; // Állítsa be az incidencia értékét $ ("#" + popid). CSS (("Margin-Top": - Popmargtop, "Margó-bal": - PopmarGlenft)); // áttetsző fekete háttér hozzáadása $ ("Test"). Hozzáadása (" "
)
;
// DIV konténer kerül regisztrálva a címke előtt
.
$ ("# Fade"). CSS ("szűrő": "Alpha (opacitás \u003d 80)")). fadein (); // a réteg áttetszősége, szűrve hülye, azaz Vissza a hamis; )); // bezár ablak és feketeség háttér $ (Dokumentum). Be ("kattintson", "a.close, #fade", funkció () () () () // bezárása kattintással az ablakon kívül, azaz A háttérben ... $ ("# Fade, .popup_block"). FladeOut (Fade () ($ ("# Fade, A.Close"). Eltávolítás (); // zökkenőmentesen eltűnik )); Vissza a hamis; )); ));
Általában, ha nem mászik a törmeléket és ne töltse be magad a túlzott kódot abrakadabra, mi csodálatos modális ablak készen áll a munka, és arra vár, a gondolatok a szöveget, vagy bármely más hasznos információt. Azok, akik modális ablakot akarnak használni a videó vagy a nagyméretű képek elhelyezéséhez, még mindig ajánlottam speciális típusú bővítményeket használni, mivel a fenti példa a modális ablak példája, több, az egyszerű és nem túl nehéz információkért , Bár ha szükséges, ez nem probléma.
A következő alkalommal, amikor biztosan mondani és mutatni a példa, és az biztos, hogy sok lesz érdekelt, hogy megismerjék és egyéb harmadik fél tárgyat a pop-up ablak. Tehát ne veszítse el az internetet, és nézze meg a frissítéseket!
Frissítés: Verzió dm-modal.js v1.3 (01/15/2017) Rögzített: Helyette az elavult funkció.Live (), a href * \u003d \\\\ # szintaxis. Most a plugin a JQuery könyvtár releváns verzióival működik.
Ez minden! Remélem, hogy egy másik hasznos leckét kiderült.
Minden tekintetben Andrew
3. Példa a Modal JQuery ablakra, amelyet a hivatkozás okoz (demóval)
A legvalószínűbb, hogy már láttál egy előugró modális ablakot az interneten - a regisztráció, a riasztás, a referenciainformációk, a fájl letöltése és még sok más megerősítése. Ebben a leckében számos példát kínálok a legegyszerűbb modális ablakok létrehozására.
Hozzon létre egy egyszerű felbukkanó modális ablakot
Folytatjuk a legegyszerűbb modális ablak kódját, amely azonnal megjelenik jquery kód
Kód beillesztése bárhol test. Az oldalad. Közvetlenül az oldal letöltése után, parancsok nélkül látni fogja a következő ablakot:
De a következő kódot kell végrehajtani a böngésző teljes oldalának betöltése után. Példánkban, miután betöltötte a képeket, egy egyszerű felbukkanó ablak jelenik meg:
A modális jquery ablak hívása a CSS-vel való hivatkozással
A következő lépés lesz a teremtés modális ablak A linkre kattintva. A háttér lassan homályos lesz.
Gyakran láthatja, hogy a bemeneti és regisztrációs űrlap ilyen ablakokban található. Elkezdünk dolgozni
Elkezdeni, írni html rész. Ezt a kódot a dokumentum testébe helyezi.
Hívjon egy modális ablakot
A modális ablak szövege
Bezárás
Szöveg a modális ablakban.
CSS-kód. Vagy egy külön CSS fájlban vagy a
A jquery kódban a fő figyelmet a modális ablak és a maszk helyzetére összpontosítja, a mi esetünkben fokozatosan homályos háttér.
Figyelem! Ne felejtse el csatlakoztatni a könyvtárat a dokumentum fejében!
Könyvtár csatlakoztatása a Google-tól. Nos, közvetlenül a jquery kódot.
Jquery kód
Gyakran gyakran olyan helyeken, ahol megfelelnek a modális ablakokat, és mindegyik különböző feladatokhoz használható. Valójában ez egy meglehetősen hatékony eszköz, amely lehetővé teszi, hogy a webhely felület interaktív és kényelmesebbé váljon. Például a modális ablakok különböző formákhoz használhatók, például egy engedélyezési űrlap, visszacsatolási űrlap, a megrendelés megrendelése, és soha nem tudod.
Ebben a hozzászólásban egy példát, hogyan készítsünk egy modális egyszerű ablakot a jQuery és a CSS használatával. Ennek a példának jellemzője, hogy nem szükséges itt, Nos, a JQuery Library kivételével.
A modális ablak kódját az oldalra helyezzük:
bezárás
Nyitott modális ablak
Amint a jelölésből látható, a modális ablak blokkja az ID attribútummal \u003d modal_formamely tartalmazza a C ID \u003d elemet modal_close. Ez az elem egy gombként szolgál a modális ablak bezárásához, emellett a Block Div \u200b\u200bBlock a blokk alatt található az ID attribútum \u003d Átfedésamely egyidejűleg szolgál, és a háttér elhomályosítása. A modális ablak megnyílik a linken, az osztályban modális.
-Ért modal_form Állandó szélességet és magasságot állítunk be, majd a képernyő közepére összpontosítottunk. A modális ablak szubsztrátjához ( Átfedés) Megadjuk a képernyő szélességének méretét, töltse ki az átlátszóságot, és alapértelmezés szerint elrejtse. Különleges pillanat S. z-index., A modális ablakban az oldal minden elemének legnagyobb, és a fedélnek több elemnek kell lennie, kivéve a modális ablakot.
Most a legalapvetőbb, ez a JavaScript kódja. A modális ablakhoz két fő esemény fog használni, ez megnyitása - kattintson az elemre az osztályra modálisA mi esetünkben ez egy link, és a modális ablak zárása, ez a fedél fedele ( Átfedés), vagy kattintson a Bezárás gombra, a mi esetünkben az ID \u003d modal_close.
Animálás révén megváltoztatjuk a függőleges helyzetet top., valamint az átláthatóság átlátszatlanságÉs ezzel érdekes hatást kapunk. Ezt a hatást az ablak megnyitásakor használják, és ha zárva van. A különbség az, hogy az eljárás az tulajdonságainak blokkok változások, ezáltal láthatóvá a nyitó és záró az ablak.
1. Modális ablak a JQuery "Simple Modal Box" -on
2. "leanmodal" jquery dugó
Tartalom megjelenítése modális ablakokban. Megtekintheti a plug-in akció a demo oldalon kattintson a linkre: Regisztráció Form vagy alapvető tartalmát.
3. JQuery dugó "toastmessage"
Pop-up üzenetek. Plugin két változatban. Egy esetben az üzenetek eltűnnek egymástól függetlenül, egy bizonyos idő után, a második megvalósításban az üzenet bezárásához, kattintson a gombra.
4. Tartalom előugró ablak a modális ablakban
Plugin "feltárja". Megtekintheti a plug-in akcióban, kattintson a tűz A Reveal modális gombot a bemutató oldalt.
5. Aranyos párbeszédpanelek
Kattintson a Demo oldalon lévő keresztre, hogy megnézze a plugint az akcióban.
6. Mootools modális ablak, Moodialog plugin
7. JQUERY POP-UP képernyő teteje
8. JQUERY POP-UP ablak
jQuery plugin a visszajelzési űrlap megjelenítéséhez az előugró ablakban.
10. Mootools "LightFace" plugin a Facebook párbeszédablak megvalósításához
Facebook párbeszédablakok. A statikus információk, képek, keretek mellett az AJAX kérések az ablakban helyezhetők el. A plug-in sok beállítása, nagyon erős eszköz. Nagyon stílusos és funkcionálisan néz ki. Kövesse a Demo oldalon található hivatkozásokat a különböző tartalmú példák megtekintéséhez.
11. JQuery modális ablak
NEAT PUP-UP párbeszédpanel a jQuery-en.
12. Modális jquery ablakok
Aranyos pop-up modális ablakok. Három stilizált design. A demo oldal 3 linket mutat be a Windows hívásához.
13. modális jquery ablakok
Többféle modális ablakok. A plug-in-eszköz megtekintéséhez kattintson a Linkre a Demo oldalon.
15. Felugró oldal üzenet
Az üzenet megjelenik az oldal tetején, amely viszont sötétedik. Kattintson a "Kattints rám" felirat a demo oldalon, hogy megtekinthesse az előugró üzenetet. A keresztre kattintva bezárja. Jqueryrel megvalósítva.
16. Modal ablak "Modalbox" a JavaScript-en
A modern modális párbeszédablakok végrehajtása a pop-up és az újraindítás lap használata nélkül. A Demo oldalon kattintson a Start Demo gombra a forgatókönyv megtekintéséhez.
17. "Leightbox" plugin a prototípus könyvtár segítségével
Plugin a modális ablakok tartalmának megjelenítéséhez.
Nem kezdődik Diablo III?
Hogyan ellenőrizze a számítógépet a kémprogramokhoz
Spyware a számítógépen