A háttér elsötétítése modális ablak felbukkanásakor. Elmosódott háttér modálisok CSS3-mal. Szép párbeszédpanelek
Meglehetősen gyakori a modális ablakok megjelenése a webhelyeken, és mindegyiket különböző feladatokra használják. Valójában ez egy meglehetősen hatékony eszköz, amely lehetővé teszi a webhely felületének interaktívabbá és kényelmesebbé tételét. Például a modális ablakok különféle űrlapokhoz használhatók, például felhatalmazási űrlaphoz, űrlaphoz Visszacsatolás, árut rendel, és soha nem lehet tudni.
Ebben a bejegyzésben egy példát nézünk meg arra, hogyan készítsünk egyszerű modális ablakot jQuery használatávalés CSS. Sajátosság ezt a példát annyiban, hogy itt nincs szükség rá, magát a jQuery könyvtárat kivéve.
A modális ablak kódját elhelyezzük az oldalon:
Bezárás
Nyissa meg a modális ablakot
Amint a jelölésből látható, maga a modális blokk egy div id= attribútummal modális_forma, amely az id= span elemet tartalmazza modal_close. Ez az elem a modális ablak bezárására szolgáló gombként fog szolgálni, emellett a blokk alatt található egy div blokk id= attribútummal átfedés, amely a háttér sötétítésére is szolgál. A modális ablakot egy link nyitja meg, az osztállyal modális.
Mert modális_forma beállítottunk egy rögzített szélességet és magasságot, majd a pozíciót a képernyő közepére helyeztük. A modális ablak alátétéhez ( átfedés) a méretet a képernyő szélességéhez állítjuk, átlátszósággal töltjük ki, és alapértelmezés szerint el is rejtjük. különleges pillanat vele z-index, a modálisnak kell lennie a legnagyobbnak az oldal összes eleme közül, és a borítónak a legnagyobbnak kell lennie az összes elem közül, kivéve magát a modált.
Most a legalapvetőbb, ez a javascript kód. A modális ablakhoz két fő esemény kerül felhasználásra, ez a megnyitása - egy elemre kattintva az osztállyal modális, esetünkben ez egy hivatkozás, a modális ablak bezárása pedig egy kattintás a borítóra ( átfedés), vagy a bezárás gombra kattintva, esetünkben id= span elemről van szó modal_close.
$(document).ready(function() ( $(.modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // a borító megjelenítésének animálása function ()( // ezután a mod. ablak megjelenítése $("#modal_form") .css("display", "block") .animate((átlátszatlanság: 1, top: "50%"), 200); ) ); )); // bezárja a modális ablakot $("#modal_close, #overlay").click(function()( $("#modal_form") .animate((átlátszatlanság: 0, top: "45%") , 200, // az átlátszóság csökkentése function()( // animáció után $(this).css("display", "none"); // ablak elrejtése $("#overlay"). fadeOut(400); // háttér elrejtése ) ); )); ));
Az animációval megváltoztatjuk a függőleges helyzetet tetejére valamint az átláthatóság átlátszatlanság, és ezzel megkapjuk érdekes hatás. Hasonló hatást alkalmaznak az ablak kinyitásakor és zárásakor is. A különbség az, hogy a blokkok tulajdonságainak alkalmazási sorrendje megváltozik, ezáltal láthatóvá válik az ablak nyitása és zárása.
3. Példa egy link által meghívott jQuery modálra (demóval)
Valószínűleg már többször látott felugró modális ablakot az interneten - regisztráció megerősítése, figyelmeztetés, referencia Információk, fájlfeltöltés és még sok más. Ebben az oktatóanyagban néhány példát mutatok be a legegyszerűbb modális ablakok létrehozására.
Hozzon létre egy egyszerű modális felugró ablakot
Kezdjük átgondolni a legegyszerűbb modális ablak kódját, amely azonnal megjelenik jquery kódot
Illessze be a kódot bárhová test az oldalad. Közvetlenül az oldal betöltése után, parancsok nélkül egy ilyen ablakot fog látni:
De a következő kód a teljes oldal böngészőbe való betöltése után fut le. Példánkban az oldal képekkel való betöltése után egy egyszerű felugró ablak jelenik meg:
JQuery modál hívása CSS-kapcsolatból
A következő lépés a létrehozás modális ablak a linkre kattintva. A háttér lassan elsötétül.
Gyakran láthatja, hogy a bejelentkezési és regisztrációs űrlapok ilyen ablakokban találhatók. Térjünk a lényegre
Kezdésként írjunk html rész. Ezt a kódot a dokumentum törzsében helyezzük el.
Modális ablak hívása
Modális ablak szövege
Bezárás
Szöveg a modális ablakban.
CSS kód. Vagy külön css fájlban, vagy be
A jQuery kódban a modális és a maszk helyzetére, esetünkben a háttér fokozatos sötétedésére fogunk koncentrálni.
Figyelem! Ne felejtse el feltüntetni a könyvtárat a dokumentum fejében!
A könyvtár csatlakoztatása a Google webhelyről. Nos, maga a jQuery kód.
jQuery kód
A modális ablakok szerves részét képezik modern web design, ezek használatával a fejlesztő ahhoz a módszerhez folyamodhat, hogy egy oldalon hurkol, és nem irányítja át a látogatót a segédoldalakra. Ebben az oktatóanyagban megvizsgáljuk, hogyan hozhatunk létre elmosódott hátterű, lenyűgöző modális ablakokat egy olyan webhelyhez, jQuery használatávalés CSS3. Ezeknek a szabályoknak köszönhetően az ablak megjelenésekor elmosódott hátteret hozunk létre, amely a látogató tekintetét csak a szükséges információkhoz köti az oldalon.
Elmosódott háttér modálisok CSS3-mal
A gazdasági hírek csak itt a legjobbak: Drobakha
Az ablak animációja úgy lesz beállítva, hogy a megjelenés gombra kattintva az ablak felülről lefelé animál, miközben automatikusan növeli a háttér elmosódását.
1. lépés: HTML
Lesz egy tárolónk, ami a következőket tartalmazza: cím, leírás, majd adunk hozzá egy osztályt a gombhoz az osztállyal toggleModal modális ablak megnyitásához:
fejléc
Leírás
Az ablak címe
A lapok nagyon érdekes és kényelmes dolog a webhely létrehozásakor, lehetővé teszi az információk megfelelő rendszerezését, miközben helyet takarít meg a webhelyen.
Ezután hozzá kell adnunk egy osztályt modális aktív, ez az osztály lesz felelős a modális ablak meghívásáért, modális_fejléc felelős az ablak címéért és stílusáért.
2. lépés: CSS
Most térjünk át a stílusra, az első lépés az óra gomb, melyik lesz a felelős, kitaláltad, az oldalon található gombokért, beállítottuk a megfelelő megjelenítési paramétereket:
A stílusok meglehetősen egyszerűek, külön fájlban tárolódnak, és nem okozhatnak nehézséget a szerkesztésük során egy olyan fejlesztő számára, aki valaha találkozott CSS-sel.
3. lépés JS
Utolsó, de nem kevésbé fontosunk a háttér automatikus elmosása lesz a menü megjelenésekor, valamint a linkek kattinthatósága, ebben apró szabályok lesznek segítségünkre. JS:
$("test").addClass("elmosódott"); $(".toggleModal").on("click", function (event) ( event.preventDefault(); $(.modal").toggleClass("is-active"); $("body").toggleClass ("elmosódott"); ));
Ennek eredményeként csodálatos modális ablakokat kapunk, amelyek kellemesek a látogató szemének, és nem teszik tönkre a tervezést.
1. Modális ablak a jQuery "Simple Modal Box"-on
2. jQuery plugin "LeanModal"
Tartalom megjelenítése modális ablakokban. Ha látni szeretné a beépülő modult működés közben a bemutató oldalon, kattintson a linkre: Regisztrációs űrlap vagy Alaptartalom.
3. jQuery plugin "ToastMessage"
Előugró üzenetek. Plugin két verzióban. Az egyik esetben az üzenetek maguktól eltűnnek, egy bizonyos idő elteltével, a második megvalósításnál az üzenet bezárásához a gombra kell kattintani.
4. A modális ablakban megjelenő tartalom
Reveal plugin. A beépülő modul működésének megtekintéséhez kattintson a „Fire A Reveal Modal” gombra a bemutató oldalon.
5. Szép párbeszédpanelek
Kattintson a keresztre a bemutató oldalon, hogy megnézze a bővítmény működését.
6. Mootools modális ablak, MooDialog beépülő modul
7. jQuery előugró sáv a képernyő tetején
8.jQuery előugró ablak
jQuery beépülő modul a kapcsolatfelvételi űrlap megjelenítéséhez egy felugró ablakban.
10. MooTools "LightFace" beépülő modul a Facebook párbeszédpanelek megvalósításához
Facebook-szerű párbeszédpanelek. A statikus információkon kívül képeket, kereteket, Ajax kéréseket helyezhet el a windowsba. Sok beállítás a bővítményhez, nagyon hatékony eszköz. Nagyon stílusosnak és funkcionálisnak tűnik. Kövesse a bemutató oldalon található hivatkozásokat, ha különböző tartalmú példákat szeretne látni.
11. jQuery modális ablak
Tiszta jQuery felugró párbeszédpanel.
12. jQuery Modals
Szép modális felugró ablakok. Három stílus. A bemutató oldalon 3 hivatkozás található az ablakok meghívásához.
13. jQuery Modals
Többféle felugró modális ablak. A beépülő modul működésének megtekintéséhez kattintson a bemutató oldalon található hivatkozásra.
15. Felugró üzenet az oldal tetején
Az üzenet az oldal tetején jelenik meg, amely viszont halványan jelenik meg. Kattintson a „Kattintson rám” címkére a bemutató oldalon egy felugró üzenet megjelenítéséhez. A keresztre kattintva bezárja azt. jQuery-vel implementálva.
16. Modális ablak "ModalBox" a javascriptben
Modern modális párbeszédpanelek megvalósítása előugró ablakok és oldalújratöltések használata nélkül. A bemutató oldalon kattintson a "Demo indítása" gombra, hogy megtudja, hogyan működik a szkript.
17. "Leightbox" bővítmény a Prototype könyvtár használatával
Beépülő modul tartalom megjelenítéséhez modális ablakokban.
Különféle helyszínépítési technikákról beszélve abszurd lenne nem beszélni a modális ablakok létrehozásának néhány módjáról. Nem fogunk beszélni a pop-up, modális ablakok használatának céljáról, hasznosságáról és felmerülő problémáiról. Nézzünk csak egyet a sok példa közül az ilyen ablakok létrehozására. Vannak helyzetek, amikor nem lehet speciális bővítményeket használni, például, mint például a és, ezért érdemes megérteni, hogyan hozhat létre saját bővítményt.
Lássuk, hogyan kell csinálni:
HTML
Kezdjük a következő attribútumokkal rendelkező címkék hozzáadásával:
href - #?w=500 az ablak szélességét határozza meg
A rel minden ablak egyedi attribútuma
class="poplight" – osztály egy felugró ablak megjelenítéséhez
<
a href=
"#?w=500"
rel=
"popup_name"
class
=
"poplight"
>Lásd: Ablak működés közben – Szélesség = 500 képpont
Lásd: Ablak működés közben – Szélesség = 500 képpont
Ezután létre kell hoznunk az előugró ablak belső jelölését. Bárhol elhelyezheti az oldalon, például a tartalom alján. Vegye figyelembe, hogy a felugró ablak azonosítója megegyezik az attribútummal rel címke Ez összekapcsolja a linket és az előugró ablakot.
fejléc
Bármilyen szöveg, amit szeretsz
És így kitaláltuk az ablakunk elhelyezését az oldalon, most díszítsük stílusok segítségével, adjunk neki úgymond tisztességes megjelenést.
CSS-elrendezés
A jobb érthetőség kedvéért írtam néhány magyarázatot ablakunk stílusparamétereire. Mivel a felugró ablakok különböző méretűek lehetnek, nem adjuk meg a CSS-ben popup_block az ablak széleit, számítsa ki a szükséges méretet, ez csak a feladat.
Az ablak kialakításával és annak megjelenés css használatával szerintem nem lesz különösebb nehézség. A stílusok közvetlenül ráírhatók HTML oldal, a címkék között
és, vagy elhelyezheti a stílusok külön fájljába, általában ebbe a fájlba stílus.css, vagy valami ilyesmi.
jquery beállítás
A modális ablak teljes körű működéséhez jQuery-t kell csatlakoztatni, akik nem ismerik ennek a könyvtárnak a munkáját, olvashatják.
Nos, megyünk tovább. a legtöbbet tudod legújabb verzió jQuery a könyvtár webhelyéről, vagy használjon egy külön, a Google rendszerében tárolt fájlt, amely összekapcsolja a dokumentummal a záró címke előtti részben
ezt a sort elhelyezve:
A következő lépésben vegye figyelembe a kitöltést és a funkciókat jquery bővítmény, a felugró ablak aktiválásához a kód tartalmaz néhány magyarázatot, hogy jobban megértsük, mit csinálunk.
jquery bővítmény
$(dokumentum) . kész(függvény()( //Ha egy hivatkozásra kattintunk az osztály poplightjával és a címke href attribútumával Val vel #$("a.poplight" ) . click(function () ( var popID = $(this) . attr("rel" ) ; //megkapjuk az ablak nevét, fontos, hogy ne felejtsük el megváltoztatni a nevet a hivatkozás rel attribútumában újak hozzáadásakor var popURL = $(this) . attr("href") ; // a méretet a hivatkozás href attribútumából kapja meg//kérelem és változók a href url-ről varquery=popURL. hasított("?"); var dim= query[ 1 ] . hasított("&"); var popWidth = dim[0]. split("=" ) [ 1 ] ; //első lekérdezési karakterlánc értéke// Bezárás gomb hozzáadása az ablakhoz$("#" + popID) . fadeIn() . css(( "width" : Number( popWidth ) ) ) . prepend( ""
)
;
//Határozza meg a margót (margót) a középső igazításhoz (függőlegesen és vízszintesen) - 80-at adunk a magassághoz/szélességhez, beleértve a párnázást + a css-ben meghatározott szegélyszélességet var popMargTop = ($("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("#" + popID) . width() + 80 ) / 2 ; //A behúzás mértékének beállítása$("#" + popID) . css(( "margin-top" : - popMargTop, "margin-left" : - popMargLeft ) ) ; // Félig átlátszó árnyékoló háttér hozzáadása$("test") . mellékel(" "
)
;
A //div konténer a címke elé lesz írva.
$("#fade" ) . css(( "szűrő" : "alpha(opacity=80)" ) ). fadeIn() ; // réteg áttetszőség, szűrő buta IE-hez return false ; ) ) ; //Csukja be az ablakot, és halványítsa el a hátteret$(dokumentum) . on("click" , "a.close, #fade" , function () ( //az ablakon kívüli kattintásra bezárás, azaz. a háttérben...$("#fade , .popup_block" ) . fadeOut(function () ( $("#fade, a.close" ) . remove() ; // elájulni) ) ; return false ; ) ) ; ) ) ;
Általánosságban elmondható, hogy ha nem megy a vadonba, és nem terheli meg magát túlzott kódhalandással, akkor csodálatos modális ablakunk készen áll, és várja a gondolatait szövegbe vagy bármilyen más szövegbe átírva. hasznos információ. Azoknak, akik modális ablakot szeretnének használni videó vagy nagyméretű képek elhelyezésére, ennek ellenére azt tanácsoltam, hogy használjanak speciális bővítményeket, mint például a , mivel a fenti modális ablak példája inkább könnyű és nem túl nehéz információkra szolgál, bár ez kívánság szerint nem probléma.
Legközelebb biztosan elmondom és példával mutatom be, és az biztos, hogy sokakat érdekel majd, hogy a felugró ablakban más, harmadik féltől származó objektumokról is tájékozódjanak. Szóval maradj velünk, és maradj velünk a frissítésekről!
Frissítés: dm-modal.js verzió v1.3 (2017.01.15.) Javítva: Lecserélte az elavult .live() függvényt a href*=\\# szintaxis használatával. A plugin most már működik aktuális verziók jQuery könyvtárak
