Modális ablak JavaScriptben. Hozzon létre egy felugró modális ablakot, a jQuery eszközt modális ablak létrehozásához

Ezzel befejeződik egy egyszerű felugró ablak létrehozása.

Egy felugró modális ablak létrehozásához vegye az elemet, tervezze meg és adjon hozzá egy hivatkozást, amelyre kattintva megjelenik:

Dokumentum címe #okno ( szélesség: 300 képpont; magasság: 50 képpont; szövegigazítás: középen; kitöltés: 15 képpont; szegély: 3 képpont tömör #0000cc; szegélysugár: 10px; szín: #0000cc; kijelző: nincs; pozíció: abszolút; tetején : 0; bal: 0; Felugró hívás

A teljes értékű modális ablak létrehozásának következő lépése egy gomb hozzáadása, amely elrejti az ablakunkat. Egy normál linkből készítünk egy gombot, hozzáadjuk a sajátunkhoz és megtervezzük:

Dokumentum címe #okno ( szélesség: 300 képpont; magasság: 50 képpont; szövegigazítás: középen; kitöltés: 15 képpont; szegély: 3 képpont tömör #0000cc; szegélysugár: 10px; szín: #0000cc; kijelző: nincs; pozíció: abszolút; tetején : 0; bal: auto ) #ablak: 0 12px: hover; : #e6e6ff;)
Ablak bezárása Hívás felugró ablak Próbálja »

A modális ablak megjelenítésekor az oldal halványítása érdekében az összes meglévő ablakkódot el kell helyeznie egy másikba:

Felugró ablak!
Zárjon be egy ablakot

Helyezze el a szülőt, és nyújtsa ki az ablak teljes szélességében és magasságában. Beállítjuk a kijelzőt: nincs; és irányítsa át rá az ablakhívás hivatkozását.

A gyermek számára távolítsa el a kijelzőt: nincs; (már nincs rá szükség, mert a szülő mindent elrejt benne). Ennek eredményeként a szülő felel a modális ablak megjelenítéséért és az oldal hátterének tompításáért, a gyermek pedig csak magának az ablaknak a díszítéséért:

Dokumentum címe #zatemnenie ( háttér: rgba(102, 102, 102, 0,5); szélesség: 100%; magasság: 100%; pozíció: abszolút; felül: 0; bal: 0; kijelző: nincs; ) #okno ( szélesség: 300px: border-radius: 0px: auto: #fff .close; szegély: 1px: #0000cc;
Ablak bezárása Hívás előugró ablak Próbálja »

Megjegyzés: ha azt szeretné, hogy a felhasználó azonnal lásson egy felugró ablakot az oldalra való belépéskor (és ne egy linken keresztül hívja meg), akkor meg kell adni az oldal címét az ablak azonosítójával együtt (pl. így néz ki: site.ru/papka/documet.

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.

Előugró üzenetek. A bővítmény két változatban érhető el. Az egyik esetben az üzenetek egy bizonyos idő elteltével maguktól eltűnnek, a második megvalósításnál az üzenet bezárásához egy gombra kell kattintani.

"Reveal" bővítmény. A beépülő modul működésének megtekintéséhez kattintson a „Fire A Reveal Modal” gombra a bemutató oldalon.

Kattintson a keresztre a bemutató oldalon, hogy megnézze a bővítmény működését.

jQuery beépülő modul a visszajelzési űrlap megjelenítéséhez egy felugró ablakban.

Facebook stílusú párbeszédpanelek. A statikus információkon kívül képeket, kereteket és Ajax kéréseket helyezhet el az ablakokban. Rengeteg beállítás a plugin működéséhez, 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.

Egy ügyes felugró párbeszédpanel a jQuery-ben.

Aranyos felugró modális ablakok. Három stílus. A bemutató oldal 3 hivatkozást tartalmaz a megnyitott ablakokhoz.

Többféle felugró modális ablak. A beépülő modul működésének megtekintéséhez kattintson a linkre a bemutató oldalon.

Az üzenet az oldal tetején jelenik meg, amely viszont halványan jelenik meg. Kattintson a „Kattintson rám” gombra a bemutató oldalon, hogy megjelenjen egy felugró üzenet. A keresztre kattintva bezárja azt. jQuery segítségével valósítva meg.

Valósítson meg modern modális párbeszédpaneleket előugró ablakok és oldalújratöltések használata nélkül. A bemutató oldalon kattintson a „Demó indítása” gombra a szkript működés közbeni megtekintéséhez.

Beépülő modul tartalom megjelenítéséhez modális ablakokban.

Üdv mindenkinek. A minap alaposan megnéztem a blog statisztikáit, és rájöttem, hogy a modális ablakok létrehozására vonatkozó példák az internetes dolgozóink számára is nagyon érdekesek. A legnépszerűbb megoldások a pop-up ablakok javascript használata nélküli megvalósítására szolgáló megoldások bizonyultak, kizárólag pure .
Munkám során sok érdekes megoldás halmozódott fel, amelyeket különböző időpontokban részletesen leírtam a blogom oldalain található cikkekben, ám ezek közül sok tanulság idővel háttérbe szorult. A blogolvasók néha nehezen tudnak eligazodni, és a hatékony modális ablakok és előugró űrlapok létrehozásának legtöbb hatékony módszere egyszerűen észrevétlen marad.
Ezért, figyelembe véve a felhasználók érdeklődését ebben a kérdésben, úgy döntöttem, hogy egyesítem a témával kapcsolatos összes tanulságot és példát, és egy külön cikkben megjelenítem a modális ablakok és űrlapok gyűjteményét. Az eredmény egy rövid áttekintés rövid leírással, példákra és cikkekre mutató hivatkozásokkal. Szóval nézz, tanulmányozd, és ha valakinek megtetszik valamelyik megoldás, nyugodtan vegye elő a forráskódot, és alkosson, alkosson, alkosson...

A modális ablakok létrehozásának legnépszerűbb módja a blogom olvasói körében. Nagyon könnyen megvalósítható. A felugró blokkok megjelenése és minden funkció kizárólag a CSS3-on alapul, Javascript és további grafikai elemek nélkül.
Lehetőség modális ablakok csatlakoztatására és megjelenítésére szinte bármely webhelyen. Elég a html keretet a megfelelő helyre helyesen elhelyezni, hozzáadni a szükséges tartalmat, stílusokat összekapcsolni, az egészet egy aktiválógombhoz vagy az oldal bármely más eleméhez (képek, menüpontok, linkek, egyetlen szó) kapcsolni. a szöveg stb.) és készen áll.

Egy nagyon egyszerű, könnyű jQuery plugin, amellyel gyorsan és egyszerűen implementálhatja weboldalán a modális ablakok megjelenítését bármilyen információval, legyen az egyszerű szöveg, kép, különféle űrlapok vagy beágyazott videó.
A megjelenést CSS segítségével alakítjuk ki, az ablakméretet közvetlenül a linkben, a href="#?w=500" attribútumban állítjuk be, ahol a #?w=500 a szükséges ablakszélességet jelöli. A lecke részleteinek tanulmányozása után azonban minden rendkívül világos lesz. Ahhoz, hogy ez a megoldás működjön, a webhelyhez kapcsolódó jQuery könyvtárra van szükség.

Kezdetben a blokkelemek tartalommal való abszolút központosításáról gondolkoztak a leckében, de erről annyit írtak, hogy úgy döntöttem, felhígítom a témát az alkalmazkodóképességgel, és az egészet egy modális ablakra borítom, kizárólag CSS eszközöket használva. A leckét tanulmányozva megtudhatja, mi sült ki ebből.

Egészen új módszer a pop-up (modális) ablakok megvalósítására. Gyakran használtam rejtett jelölőnégyzeteket legördülő információs blokkok vagy „”” létrehozásához. Ennek eredményeként minden nagyon egyszerűnek bizonyult a CSS3 és a HTML5 szintaktikai jellemzői segítségével, könnyedén megszervezheti a modális ablakok munkáját. Nem koncentráltam túl sokat a dizájnra (nem ez a lényeg), a Bootstrap infóblokkokat vettem kiindulópontnak. A módszer minden modern böngészőben tökéletesen működik;

A videónézés modális blokkban, kizárólag CSS3 használatával, javascrip nélkül történő szervezése kísért. Nem, minden rendben van a videokimenettel a modális ablakban, nem találok megfelelő és kielégítő megoldást a videó leállítására, amikor az ablak be van zárva. Hülyén használtam egy üres href="" attribútumot tartalmazó linket, ez a nem egészen kóser módszer sok képzett mesterembert megfordít álmában, de jelenleg még nem találtam hatékonyabb és érvényesebb megoldást.

Gyakran kérdezték tőlem, hogy nem csak képekhez, hanem szövegekhez is be lehet-e ágyazni valamilyen csúszkát egy modális ablakba. Miért ne. A burzsoázia talált egy egyszerű tartalomforgatót, amely minden paraméternek megfelelt, csak kombinálni kellett egy kész modális ablakkal. És a végén az történt, ami történt :)). Nézd, minden nagyon egyszerűen megvalósítható.

Sok webhely használ felugró visszajelzési űrlapokat, regisztrációs és bejelentkezési űrlapokat. A legegyszerűbb módja egy működő űrlap beágyazása egy kész modális ablakba. Vegyünk egy elég tisztességes formát, a CSS3-ban lefektetve, a fent bemutatott modális ablak bármely verzióját, csak az marad, hogy mindkét elemet egyetlen mechanizmusba egyesítsük. Hogyan kell csinálni? Pontosan erről van szó a bemutatott leckében.

Egy különálló, modális kapcsolatfelvételi űrlap kiváló lehetőség arra, hogy felhasználói üzeneteket küldjenek bármely oldalról vagy egyéni webhely (blog) bejegyzéséről. Helyesen csatolja az űrlaphoz a PHP-kezelőt, helyezze a kívánt oldal törzsébe, és ennyi, csak időnként ellenőrizni kell a postafiókját. Ez a módszer minden modern böngészőben megfelelően működik: Chrome, Firefox, Opera, Safari, Internet Explorerben is, a 9-es verziótól kezdve. Maga az űrlap modális ablak funkcióval van felszerelve CSS3 varázslat segítségével.

A lightbox egyfajta modális ablak, vagy inkább a működési elve szinte ugyanaz, bár leginkább nagyított vagy teljes méretű képek megtekintésére használják. Egy időben úgy döntöttem, hogy elkészítem a Lightbox többé-kevésbé adaptív verzióját, kizárólag CSS3 használatával. Megtudhatja, mi sült ki ebből, ha megnézi a példát, és ha releváns a téma, tanulmányozza a leckét. Azok a felhasználók, akik erősen ragaszkodnak az IE 8-hoz és az alatti verziókhoz, sajnos nem látnak semmit, a módszer a pszeudo-class:target használatán alapul.

Érdekes (szerintem) megoldás egy külön, eredetileg tervezett, pop-up kapcsolatfelvételi űrlap létrehozására az oldalhoz. Az űrlap az onclick esemény feldolgozásán alapul. Tervezés eredeti kép felhasználásával postai boríték formájában. Az űrlap minden böngészőben gyorsan és helyesen működik, így méltó példája a felhasználókkal való interakciónak.

Sok máshoz hasonlóan engem is lefagynak a különféle felugró ablakok, amikor az oldal kezdetben betöltődik. Szerintem ez a módszer túl tolakodó. De a funkció keresett és széles körben használt, ami azt jelenti, hogy valószínűleg még mindig érdemes megnézni, hogyan működik az egész. Minden modern böngésző gyanakszik a különféle felugró ablakokra a webhely betöltésének kezdeti szakaszában, egyszerűen blokkolja őket. A bemutatott leckében részletesen leírom, hogyan lehet ezt a blokkolást megkerülni, valamint megtanulja, hogyan kell helyesen használni a cookie-kat, hogy az ablak az oldal első meglátogatásakor, vagy bizonyos időközönként megjelenjen a felhasználó számára.

Valószínűleg ennyi. Természetesen van néhány más munkalehetőség a modális ablakok létrehozására a rejtettben, de olyan sok van belőlük az interneten, a lényeg az, hogy megtalálja, amire szüksége van. Remélem, ez a válogatás segít eligazodni a témában a blogom cikkeinek halomában. Mivel az ásatások sikeresek és elveszett anyagokat találnak, a felülvizsgálatot frissítjük.

Minden tisztelettel, Andrew

Még egyszer rátérek a modális (pop-up) ablakok létrehozásának témájára. Az utóbbi időben egyre jobban érdekelnek a felugró ablakok végrehajtásának különféle technikái javascript, jQuery bővítmények stb. használata nélkül. Nagyobb érdeklődésre tart számot a tiszta stílusok használatának lehetősége és az új funkciókban rejlő kimeríthetetlen lehetőségek.
Néhány tekintélyes burzsoá fejlesztései alapján e tekintetben ravasz srácok, jó eredményeket érnek el a CSS3 segítségével modális ablakok létrehozása terén. A feladat mindenekelőtt a végeredmény többé-kevésbé stabil, böngészők közötti kompatibilitásának elérése, és természetesen a legkisebb veszteséggel a teljes kódmennyiség csökkentése mind HTML-ben, mind CSS-ben, hogy megkönnyíti a honlapkészítésben sokat szenvedett dolgozók életét.
Hogy a végén mi történik ezzel kapcsolatban, azt meglátjuk, és egyúttal megtanuljuk, hogyan készítsünk felugró modális ablakokat a CSS3 „varázslatával”.

Frissítve: 2017.10.27

Először is, mindazok, akiket érdekel ez a téma, nézzen meg egy példát a modális ablakok működésére a különböző verziókban, és töltse le a forrásokat:

Ezt a leckét nem szabad cselekvési útmutatónak tekinteni, mivel ebben a szakaszban csak a modern böngészők (IE 9+, Firefox, Safari, Opera, Chrome) lehetett megbízható támogatást elérni. Tekintettel arra, hogy az IE böngésző ősi verziói még mindig meglehetősen népszerűek a felhasználók körében, javaslom, hogy ezt a cikket egyfajta kísérletként tekintsék, a CSS3 képességeinek bemutatását.

Oké, most térjünk át közvetlenül a html kód tényleges elrendezésére és a modális ablakunk stílusára a css3 használatával)))

Először is hozzunk létre néhány alapvető HTML-jelölést. Amint látható, az alapkialakítás meglehetősen egyszerű, ha figyelembe vesszük a modális ablakok és gombok (hivatkozások) html jelölését az aktiváláshoz. Minden modális ablak nem más, mint egy szabványos konténer, benne bizonyos tartalommal és egy „Bezárás” gombbal, amelyet kizárólag CSS használatával alakítanak ki.

Nyitott ablak 1 Nyissa meg az ablakot 2 Videó az ablakban 3 Fénykép a 4. ablakban Ide bármilyen tartalmat, szöveget elhelyezhet képekkel vagy videóval! Cím Ide illesztheti be a videót, vagy bármely harmadik féltől származó forrásból, YouTube-ból, Vimeóból stb. (iframe, beágyazás)...

A fenti kódpéldában az érthetőség kedvéért rövid magyarázatokat írtam a modális ablakok konténereibe. Hasonlatosan, csak el kell helyeznie bármely tartalmát a felugró ablak div konténerébe, legyen az egyszerű szöveg, képek vagy videók bármely harmadik féltől származó forrásból, YouTube, Vimeo stb. Hivatkozásokat készíthet a modális ablakok szövegének meghívására, vagy formázhatja azokat az űrlapon, mint a példában.

A következő lépés, ez a legérdekesebb, fontos, hogy minden szükséges stílust előkészítsünk a modális ablakunkhoz, megtervezzük a megjelenést és a funkcionalitást. Az alapvető oldalstílusokat kihagytam, hogy ne okozzak félreértést, és a jobb érthetőség kedvéért néhány szabályt megjegyzésekkel hígítottam:

/* A fade réteg és a modális */ .overlay alapvető stílusai ( fent: 0; jobbra: 0; lent: 0; balra: 0; z-index: 10; megjelenítés: nincs; /* háttér elhalványítása */ háttérszín : rgba(0, 0, 0, 0.65 pozíció: fix ) / * modális ablakstílusok */ .popup ( felső: -100%; jobb: 0; bal: 50%; betűméret: 14 képpont; z-index: 20; margó: 0; szélesség: 85%; min-szélesség : 320px ; max-width: 600px, stabil görgetéskor sugár: 4px; -ms-border-radius: 4px; betűtípus: 14px/18px "Tahoma", Arial, -box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px; 60px rgba(0,0,0,.3); -moz-box-shadow: 0 15px 20px rgba(0,0 ,0,.22),0 19px 60px rgba(0,0,0,.3); -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -webkit-transzformáció: lefordítás(-50%, -500%); -ms-transzformáció: lefordítás(-50%, -500%); -o-transzformáció: lefordít(-50%, -500%); transzformáció: lefordítás(-50%, -500%); -webkit-transition: -webkit-transform 0.6s easy-out; -moz-transition: -moz-transform 0.6s easy-out; -o-transition: -o-transform 0.6s easy-out; átmenet: transzformáció 0.6s könnyítés; ) /* aktiválja a modális blokkot */ .overlay:target+.popup ( -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate ( -50%, 0) transzformáció (-50%, 0% ) /* a bezárás gombból */. magasság: 20px; szegély: 15px; -box-shadow: 0px 10px #000 box-shadow: 0px 10px #000 font: 13px/20px "Tahoma", sans-serif: .8s; .8s; -ms-transition: minden egyszerű .8s; 9);

Amint látjátok, kedves barátaim, minden nagyon egyszerű, és nincs szükségtelen zűrzavar. Ha mindent helyesen csinálsz, akkor egy csodálatos eszközt kapsz a tarsolyodba, amelyben bármilyen tartalmat elhelyezhetsz, legyen az szöveges tartalom, fényképek, különféle regisztrációs és visszajelzési űrlapok, vagy bármilyen külső forrásból származó videó. Kísérletezzen a paraméterekkel, módosítsa az ablakot tetszés szerint. Ha lehetséges, ossza meg tapasztalatait vagy hirtelen felmerülő problémáit a megjegyzésekben.

Gyakran, sőt nagyon gyakran felteszik nekem a kérdést, hogyan lehet megfelelően leállítani a videolejátszást egy mod bezárásakor. ablak. Amikor bezárja a modális ablakot, a videó lejátszása a bemutatóban leáll. A demóban az onclick eseményt használtam az ablak bezárása gombhoz, a linkben feltüntetve a bemutató oldal címét, pl. oldal, amelyen a videó ablak található:

Egyszerűen használhatsz egy üres href="" attribútummal ellátott linket, mindkét esetben újra betöltődik az oldal és ennek megfelelően az ablak bezáródik és a videó leáll, persze mankó, de nincs más hatékonyabb és érvényesebb megoldás, Javascript csatlakoztatása, jelenleg nem vagyok itt.

A JavaScript API-val a Chromeless Player és a YouTube beágyazott lejátszó JavaScript kóddal vezérelhető. A beágyazott videóval rendelkező modális blokknál a végrehajtható js a következő lesz:

var player; function onYouTubePlayerAPIReady() ( player = new YT.Player("player"); ) $("#stop").click(function())( player.stopVideo() ))

Ha rákattint az id="stop" gombra, a funkció meghívódik, az ablak bezáródik és a videó lejátszása leáll.
Azonban meg kell értenie, hogy más videoszolgáltatások esetében a tamburákkal való tánc más lesz))). Bár mindig van választás - kész speciális bővítmények használata.

Az orosz nyelvű országokban élő webtervezők és vállalkozók valószínűleg nem csak angol nyelvű sablonokat akarnak használni. Az orosz nyelvű kész megoldások gyűjteményeihez is hozzá akarnak jutni. Ezért szeretnénk felhívni a figyelmet a legújabb részre, amelyet most a TemplateMonster piactéren mutatnak be. Érdemes megemlíteni, hogy az egyes sablonok szövegét kézzel írták. Ráadásul nincs szükség haladó programozási ismeretekre egy lenyűgöző online projekt létrehozásához.

Minden tisztelettel, Andrew

Hasznos lehet elolvasni: