Mi a felugró ablak. Felugró ablak HTML és CSS

Ma beszélünk arról, hogyan lehet létrehozni a felbukkanó ablakot a webhelyén. Most ez a módszer nagyon népszerű, azonban a végrehajtás legtöbb megoldása fizetendő. A példa nem egy nagyon szép ablak (de ez csak egy példa) a rekordon belül ...

Ebben a bejegyzésben megtanuljuk ezt a felbukkanó ablakot. Egyszerű, gyorsan, hatékonyan, és ami a legfontosabb ingyenes!

Bármely felugró ablak lényegében két részből áll. Az első a közös háttér fényereje. A második az ablak maga. Az ablak viszont általában címre, szöveges és előfizetési űrlapra van osztva. Készítsük el az adatbázist az ablakunkhoz, tekintettel a megadott struktúrára.

Nekünk van:
fs_popup_bg. - az oldal áramának megszakítása;
fs_popup. - maga az ablak;
fs_popup_head - ablak címe;
fs_content - az ablak tartalma, két részre osztva;

Most adjuk meg a szükséges stílusokat ...

Elfutunk a felugró ablakunk stílusát.
#fs_popup_bg. - javasolja, hogy háttérünk fekete legyen, és szinte nem átlátszó (0,9) a bal oldalon található felső sarok És vegye be az egész képernyőterületet. Ebben az esetben az elem mélysége, és pontosabban a többi elem fölé emelkedése nagyon nagy lesz (tudatosan több, mint mások).
#fs_popup. - javasolja, hogy az ablak a háttér szintjén lesz (különben nem látnánk). Mérete 600px lesz 300px kerek sarkokkal és piros keret.
.fs_content_left, .fs_content_right - azt mondja nekünk, hogy a blokkokat balra nyomják (egy szinten meg kell találnod), vannak beágyazása és betűtípusa.

Töltse ki tartalmi ablakunkat:

És a stílusunk hozzáadásával, egy gyönyörűebb kijelzőn:

Itt van az elv, és ez az. Amint látható a JavaScript példa a felugró ablakhoz, az ablak lényegében két esetben szükséges:
1) az ablakunk bezárása;
2) egy esemény az "Feliratkozás" gombra kattintva;
Nem akadályozza meg az ellenőrzést, függetlenül attól, hogy ez az ablak jelenik meg ezen a számítógépen. Ehhez a cookie-kkal való munka meglehetősen alkalmas.

A "Kezdők számára" cikkek sorozatának folytatása, meg akarok mondani a modális ablakok elrendezéséről.

Csak abban az esetben, ha megmagyarázom, hogy a modális (popup) ablakok alatt a rétegek a rétegek értendők, amelyek mind a többiek, és bármilyen lépést igényelnek a felhasználóból - beírni valamit, megerősíteni vagy elutasítani valamit, stb. Az IE funkcionálisan vagy "különálló ablak" van a főablakban vagy a figyelmeztető ablakban.

Első pillantásra, mi lehet könnyebb - egy blokk rögzített pozícionálással, és ez az. De vannak árnyalatok itt, amelyeket megvitatnak.

Általánosságban elmondható, hogy a HTML oldalkódja a popup_om-val megvizsgálja:

Az első probléma, amellyel találkozunk, nem lesz fiatalabb megnyitni a felugró ablakot, amely nagyobb, mint a böngészőablak magassága, ha rögzített pozícionálást használunk. Ha az oldalsó ablak kevesebb, akkor nagyon kellemetlenül a háttér görgetése fog kinézni, amikor az ablak görgetése.

Ezek a problémák különösen fontosak az okostelefon képernyőjén megjelenő ablakhoz, javasoljuk a következő megoldást: Nem fogjuk rögzíteni a modális ablakunkat, és a blokk a webhely teljes tartalmával, és a modális ablak teljesen elhelyezhető:

/ * Dimming * / .Onovlow (háttér: RGBA (0, 0, 0, 0.7); Pozíció: rögzített; Top: 0px, alsó: 0px; balra: 0px; jobb: 0px; z-index: 100; ;) / * Modális ablak * / .Popup (Pozíció: abszolút; z-index: 101, háttér: # #FFFFFFF, szélesség: 600px; min-magasság: 300px; margó-balra: -300px; Top: 10%; balra: 50%; kijelző: nincs;) .popup .close (pozíció: abszolút, felső: 10px; jobb: 10px; kijelző: blokk; szélesség: 17px; magasság: 17px; Opacity: 0,5; Háttér: URL (../ img / close.png) No-Repeat Center; -webkit-átmenet: Opacity 0.5s; -moz-átmenet: Opacacity 0,5s; Átmenet: Opacacity 0,5S;) .Popup .Az lebegés

Most kezdjük el az ablakunk megnyitó és záró eseményeit feldolgozni:

Var win_top \u003d 0; $ (Dokumentum). Ready (funkció () (// Nyissa meg a modális ablakot, amikor a $ ("# lista" tartalmára kattint. Kattintson (funkció () (popup_open ("# mypopup");))) // nyitott A Modal ablak azonnal letölti a Popup_Open oldalt ("# mypopup"); // Adja hozzá a Modal Window $ (Dokumentum) .on záró kezelőjét ("kattintson", ".popup .close, .plow", funkció ( ) (Popup_close () visszaadása hamis;))))))) funkció Popup_Open (választó) (ha (selector.lengnth) (win_top \u003d $ (ablak) .scrolltop (); $ ("# lista"). : "Rögzített", "Bal": "0", "Jobb": "0", "Top": "0": "0", // Hozzáadás az eltoláshoz, hogy a háttérben pontosan milyen része van a felhasználónak -top ":" - "+ win_top +" px ")) $ (". túlcsordulás, "+ választó) .fadein ();)) Funkció Popup_Close () ($ (" túlcsordulás, .popup). Hide ( ); $ ("# Lista"). CSS (("pozíció": "statikus", "margó": "0px": "0px")) // Visszaadja a görgetést a $ (ablakba) .scrolltop (win_top);)

Itt egy választógombot (ID) paraméterként továbbítanak. Ez a megközelítés kényelmes, ha az oldalon több POP-ot tartalmaz, amelyeket a hivatkozásokra kattintanak. Ezután a HREF attribútum linkekben regisztrálhatja a blokk blokkját, amelyet horgonyként nyit meg:
href \u003d "# mypopup" és amikor a feldolgozás kattintva nézze meg az attribútum értékét

Var id \u003d $ (ez) .attr ("href");

És az utolsó vonalkód maradt - a modális ablakunk mobil adaptációja. Itt minden teljesen egyszerű - amikor eléri a szélességet, megváltoztatjuk az igazítást, és hagyjuk, hogy dinamikusan számolja a méreteket:

@Media képernyő és (max-szélesség: 650px) (.popup (szélesség: Auto, margó-balra: 0px, felső: 40px; balra: 10px; jobb: 10px;

A Popup ablak egy pop-up hirdetés, amelynek célja a webes forgalom vagy a címgyűjtés vonzása. email. Az ilyen elemek gyakran az online reklámok formái a WorldwideWeb-ben. Általában ezek az új ablakok megnyitása egy webböngészőben a hirdetés megjelenítéséhez. Általában a JavaScript generálja a Cross-Site Scripting (XSS) segítségével, néha a másodlagos hasznos terheléssel és az Adobeflash használatával.

A felbukkanó fajta felbukkanó hirdetések, amelyek egy új böngészőablakban nyitottak, az aktívakba rejtve.

A származási történelem

Az első pop-upok az 1990-es évek végén található Tripod.com hosting. Ethan Tsukerman azt állítja, hogy írta a kódot, hogy elindítsa a hirdetést külön ablakokban a banner hirdetések panaszaira válaszul. Ezt követően a fejlesztő ismételten elnézést kérte a találmányt okozó kellemetlenségért.

Opera volt az első fő böngésző, amelyben az eszközöket a pop-up ablakok blokkolásához vették. A Mozilla böngésző később javította ezeket a fejlesztéseket, elkezdte blokkolni az oldal betöltött felbukkanóablakát. A 2000-es évek elején minden nagyobb böngésző, kivéve Internet böngésző.lehetővé tette, hogy a felhasználó szinte teljesen eltávolítsa a nem kívánt felbukkanó hirdetéseket. 2004-ben a Microsoft kiadta a Windows XP SP2-t, amely a blokkoláshoz és a böngészőbe került.

A legtöbb modern böngészőt előugró védőeszközökkel szállítják. A harmadik féltől származó eszközök jellemzően más funkciókat is tartalmaznak, például a hirdetések szűrése.

Popup ablakok

Néhány típusú betöltött tartalom - képek, ingyenes zene és mások - előugró ablakokat okozhat. Ezenkívül néha úgy néz ki, mint a hétköznapi weboldalak, és a webhely neve megjelenik a keresősávban. Sok erőforrás Használja az előugró ablakokat az információk megjelenítéséhez anélkül, hogy megszakítaná az oldalt jelenleg jelenleg. Például, ha töltötte be az űrlapot a weboldalon, és szükség volt egy további kézikönyvre, a felugró ablak megadja Önt további információanélkül, hogy az űrlapba bevitt adatok elvesztését okoznánk. A legtöbb felugró lista zárak lehetővé teszik az ilyen terhelést.

De emlékezni kell arra, hogy egyes webes telepítők, például a McAfee által használt, használjon felugró ablakot a telepítéshez. szoftver. Sok internetes böngészőben megnyomva ctrl billentyűk Ha rákattint a linkre, megkerülheti a szűrőt.

Ebben az esetben egy kattintás (még véletlen) egy felugró ablak is vezethet mások megnyitásához.

A pop-up blokkoló megkerülése

A hirdetési banner és pop-up ablak kombinációja egy "bejelentési bejelentés", amely DHTML-t használ a képernyőn az oldal tartalmának tetején. Keresztül JavaScript bejelentés A weboldal tetején átlátszó rétegben lehet kiszabni. Ez a hirdetés szinte minden esetben jelenhet meg, amikor a hirdetés szerzője. Az ilyen felugró ablakos szkript nem lehet előre észlelni. Például a hirdetés tartalmazhat Adobeflash animációt a hirdető webhelyén. Úgy is néz ki, mint egy rendszeres ablak. Mivel a hirdetés része egy weboldal, nem lehet blokkolni blokkoló segítségével, de a nyílás elkerülhető harmadik féltől származó alkalmazások (mint az adblock és az adblockplus) vagy egyedi stílusú asztalok használata.

Popunder.

Az ilyen hirdetés hasonló a szokásos felbukkanó ablakhoz, de a böngésző főablakához rejtve van, és nem jelenik meg. Amikor a felbukkanó hirdetések széles körben elterjedtek, és elkezdtek elfoglalni egy számítógép egész képernyőjét, sok felhasználó megtanulta, hogy azonnal lezárja őket. Ezért a Popunder megjelent, amely nem zavarja a felhasználót, hogy megtekinthesse a webhely tartalmát. Ezek általában észrevétlenek maradnak, amíg a fő böngészőablak bezáródik vagy hengerel. Tanulmányok kimutatták, hogy a felhasználók jobban reagálnak az ilyen reklámokra, mint a felbukkanó hirdetéseknél, mert nem tűnnek el nélkülözhetetlenek.

Népszerű hirdetési technológia

Két nagyon egyszerű részt vesz a hirdetésben javaScript funkciók1997-ben bevezetve a Netscape 2.0b3 böngészővel. Ezt a módszertant az interneten széles körben használják. A modern webes kiadók és hirdetők segítségével létrehozhat egy ablakot az oldal tartalma előtt, hirdetési rendszerindítás előtt, majd küldje el a képernyő mögött.

A legtöbb modern böngésző csak akkor tudja megnyitni a Popup felugró ablakot, ha bármilyen kölcsönhatás van a felhasználóval (például egy egérkattintással). Minden nem interaktív hívás (visszahívás az időzítő, az események letöltése stb.) Egy új ablak blokkolja. A korlátozás körül, a legtöbb előugró ablakot az egér esemény hallgatójával közvetlenül a dokumentumhoz vagy a dokumentum testéhez csatlakoztatja. Ez lehetővé teszi az egér összes esetének kijavítását azon az oldalon, amelyet más eseménykezelők nem használtak. Például, ha a felhasználó kiválasztja a szöveget, az egérkattintást észleli a dokumentumhoz csatolt hallgató. Ennek eredményeképpen egy felugró ablak nyílik meg a fenti kód használatával.

"Sly" generátor popup-Windows

A különböző webhelyek és webes alkalmazások felhasználói folyamatosan szembesülnek a böngésző használatakor a nem kívánt előugró ablakokkal. Jellemzően az ilyen felugró ablakot a "Close" vagy a "Cancel" funkció segítségével távolítják el. Mivel ez egy tipikus felhasználói válasz, a fejlesztők néhány trükköt alkalmaztak. Így a reklámüzenetek fejlesztésekor a képernyőgombok vagy a vezérlők létrehozásakor hasonlóak a "Bezárás" vagy a "CANCEL" opcióhoz. Ha azonban a felhasználó kiválasztja az alábbi lehetőséget, akkor a gomb váratlan vagy jogosulatlan műveletet végez (például egy új felbukkanó ablak megnyitása vagy a nem kívánt fájl letöltése a felhasználói rendszerbe).

Mivel a webes tervezés technológiája lehetővé teszi a szerzők számára, hogy bármilyen "utánzás" opciót használjanak, egyes felhasználók megtagadják a felugró ablak belsejében lévő bármely elemet.

URL átirányítás

Néha az URL átirányításra kerül promóciós oldalak A háttér URL átirányítási funkciójának használata. Ezek néha új fülön vannak nyitva, majd a régi háttérfül tartalma helyettesíti az átirányítású hirdetési oldalakat. Az adblockplus, az ublock vagy a Noscript nem tudja blokkolni ezeket a felugró átirányításokat. Ez a funkció egyre inkább a hirdetési forgalmazók segítségével keresnek egy utat, hogyan készítsünk egy felugró ablakot a legaktívabb.

Hogyan lehet megszabadulni a pop-up ablakoktól

Hogyan lehet eltávolítani a hirdetést a böngészőben? Először ellenőrizze a frissítések elérhetőségét. A böngésző megmentése az érintett állapotban lesz nagyon fontos A felugró ablakok elleni küzdelemben. A legtöbb böngésző úgy van konfigurálva, hogy automatikusan frissítse, de le lehet tiltani. Ez a folyamat általában csak néhány percet vesz igénybe.

• Firefox: Nyomja meg a gombot az alkalmazás nevével a bal felső sarokban. Mozgassa az egérmutatót a "Súgó" menüpontra, és válassza a "Firefox" lehetőséget. Ez megnyit egy ablakot a böngésző verziójával kapcsolatos információkkal. Ha a böngészője nem kerül automatikusan letöltésre és telepítve.
• Chrome: Nyomja meg a menü gombot a jobb felső sarokban. Válassza ki a "Chrome-ről" lehetőséget az alján, megnyílik új betét, és a böngésző ellenőrzi a frissítések elérhetőségét. Ha igen, akkor automatikusan telepítik őket.
• Internet Explorer: A frissítési módszer a használt furnér verziótól függ. Régebbi lehetőségek esetén be kell lépnie a központba windows frissítések. Az Internet Explorer 10 és 11 számára engedélyezheti automatikus frissítésekA fogaskerék ikonra kattintva és az Internet Explorer-ről való kiválasztásával.

Ha a frissítések nem segítenek

Néha a webhely és a hasonló szoftver felugró ablaka túl mélyen beágyazódik, így frissítéssel eltávolítható. Ilyen esetekben a webböngésző újratelepítése vagy megváltoztatása segíthet megoldani a problémát.

Első letöltés utolsó verzió A használni kívánt böngésző. A letölthető linkeket találhat főoldal Minden alkalmazás.

Számos internet-felhasználó, a "lebegő ablak" kifejezés negatív egyesületeket okoz. Mielőtt a szemek azonnal "úsznak" a kép arról, hogyan próbálják meg megtekinteni a szükséges információkat a webhelyen, ez a GADDA bezárja a kívánt szöveget. Mi még rosszabb, ha megpróbálja bezárni, a felhasználó gyakran egy másik erőforrásra számít.

Az előugró ablakok Kadda?

Annak ellenére, hogy ilyen rossz dicsőség, a felugró ablakok nemcsak bosszanthatnak, hanem előnyösek is. Kezdetben csak egyfajta párbeszédablakokfelhasználói felület elemekként használják.

Tájékoztatják, és a felhasználó és a program közötti párbeszéd eszközeként (webes alkalmazás). De sajnos, a sok felhasználó ilyen negatív hozzáállása nagyrészt indokolt, mert elsősorban reklám célokra használják őket.

• Nyitás az előtérben (pop-up) - felugrik a fő tetején;
• Nyitva a háttérben (pop-under) - Nyissa meg a főablakot.

Az utóbbiak a leginkább ravaszabbak. Aktívá válnak és láthatóvá válnak a felhasználó számára, miután lezárják a főt. Ezért meghatározni a forrásukat és blokkolja időben.

A harc szerszámai

A felugró ablakok széles körű használata miatt a nemkívánatos reklámok az interneten sok szoftverfejlesztő kezdett beágyazni az őket küzdelem.

Az internet használatának fő programja böngésző. Ezért a hirdetési ablakok végrehajtásának fő módja a böngészőben valósul meg:

• Internet Explorer - lett az utolsó az összes szoftver termékek, amelyek a lehetőségét, blokkolja a pop-up hirdetési hajtottak végre. Ezt csak 2004-ben végezték;
• Opera - Ez a termék lett az első böngésző a világon, a beépített blokkoló funkció a pop-up ablakok. Az opera felbukkanó ablakai 2000-től kezdődhetnek;
• Mozilla Firefox - Ez a böngésző javította a hirdetés leküzdését, amelyet az opera-ban hajtottak végre. Ellentétben őt, nem minden felugró reklám blokkolva van a Mozilban, de csak a betöltött, amikor a főablak kinyílik.

A modern böngészőkben a blokkoló rendszer blokkolása a felhasználói felületen keresztül van konfigurálva. A krómnál, mint a legtöbb más böngészőben, a blokkolás engedélyezésének vagy letiltásának képessége, valamint a kivételek listájának kidolgozása ( megbízható oldalak):

A pop-up létrehozása a JavaScript használatával

A webes programozásban több technológiát használnak felugró ablakok létrehozására. A létrehozásának fő eszköze továbbra is JavaScript. A funkcionalitása számos pár párbeszédet tartalmaz, amelynek hatása hasonló a felbukkanó ablakok cselekvéséhez:

• A riasztási () módszer megjeleníti a szokásos szöveges üzenetet. A párbeszédablak elrejtése az olvasás után az ablak alján található "OK" gombra kattintana;
• A () módszer megerősítése hasonló az előző módszerhez. De a párbeszéd megjeleníti a párbeszédet, kivéve az "OK", a "Mégse" gombbal is rendelkezik. Segítségük segítségével a felhasználó elfogadhatja vagy elhagyhatja az ablakban megadott állapotot;
• Prompt () módszer - a Javascript felbukkanó ablak másik fajainak hívására szolgál. A fent említett fent említettektől eltérően az ablak szövegmezővel is rendelkezik. A szöveges adatokat beírhatja, amely hozzárendelhető a kívánt változó értékének.

Az általuk okozott összes három módszer és fajtás művelete a képen látható:

Itt van a módszer teljes szintaxisa:

win \u003d ablak. Nyitott (URL, név, params)Hol:

• az URL olyan oldalcím, amely új ablakban nyílik meg;
• Név - A létrehozott ablak neve. Használható további feldolgozásra az űrlapok (célparaméter);
• Params - az új ablak paramétereinek sora. Őket teljes lista Megtalálhatja magát a JavaScript dokumentációból.

Az alábbi kép mutatja a módszer hatását, és egy egyszerűsített pop-up parancsfájlt ad meg:

Felugró ablak létrehozása CSS használatával

Létrehozhat egy pop-up ablakot a CSS-ben. Ezt a funkciót csak a technológia harmadik verziójának hozammal hajtották végre. Nem szükséges visszaélni ezt az opciót, mert csak a böngészők legújabb verzióiban fog működni:

Más technológiák áttekintése

Nem szükséges egy felugró ablak fejlesztése önállóan. Most van egy csomó ingyenes plug-in a jquery. Az egyik összekapcsolásával kész ablakot kapsz.

Számos plug-in van a népszerű CMS számára is. Ezek tartalmazhatnak egy egész ablakot. Az egyesek tervezése és funkcionalitása "élesített", hogy elvégezzen egy adott feladatot ( regisztráció, küldés és egyéb).

Vannak számos népszerű szkript is. Az egyik példa az alábbiakban látható. Az ilyen elv az előugró ablakokat alkalmazza az érintkezésben és más népszerű szociális hálózatokban:

A kódot a "lusta" opcióban adják meg. A szerkesztőbe való beillesztés és a végrehajtás végrehajtásához készen áll a JQuery-alapú felbukkanó ablakra kész példát.