Popup jQuery c lekapcsolása scroll fő tartalomra

Legutóbb találkoztam egy meglehetősen szokatlan Taxco a taskmenedzhere. ProdzhektMenedzher csak közvetlenül másolja a szöveget az ügyfél - „Szeretnék felugró volt vkontakte”. Ami azt jelenti, „a VKontakte” Rájöttem egyszerre. „Potestit” felugró az sots.seti értem amit akarnak tőlem - egy nyílt felugró fő tartalomra nem görgethető, de ugyanakkor, ha a méret a felugró több mint felhasználói fiók - kell görgetni felugró (a főétel tartalmat is görgetés nélkül ebben az esetben).
Bonyolult nem látok semmit ebben a Taxco és elkezdte annak végrehajtását. A logika a következő volt - amikor otkrtii felugró így bodyoverflow = rejtett. és amikor lehajtja természetesen visszatér a auto. Sam hozott egy felugró div-átalakító és adja neki a túlfolyó = auto. hogy amikor az ablak mérete kisebb, mint a méret a felugró - a felhasználó görgetni a azt.
Kevesebb OS X minden tökéletesen működött. De nem vettem észre, egy árnyalatot - az összes többi rendszer a böngésző folyamatosan görgetés látható, amelynek a szélessége. És ha csak nem egy blokk, amely egy tekercset, túlfolyó rejtett - scroll eltűnik szélessége a blokk nagyobb, mint a szélessége a könyvet és tartalmát „ugrik”. Aztán úgy döntött, hogy írjon egy plugin, ami megoldja ezt a problémát. Ismét nézd meg, hogy ez a csodálatos felugró in VKontakte, értem a logikáját, és futni kezdett.

(Azt hiszem, hogy az oldalak, amelyek nem használják a jQuery -. Ezért ezek a ritka, írtam egy plugin a jQuery)
Mivel akartam írni egy plugin, amelyre nem volt szükség, hogy csatolja bármilyen design HTML és CSS, bővítmény kell csinálni az egészet magának. Először is, nézzük megérteni, mi Html-frame lesz szüksége plugin. Mivel a felugró legyen háttér, kotoroyj fedezi a fő tartalmat a szervezetben div jelenjen meg, amely közvetlenül a háttérben. Ez az első elemet. A második - a wrapper popup. Szükséges annak biztosítása, hogy abban az időben, amikor a test áll túlfolyó rejtett, ha a felugró nagyobb az ablak méretét a felhasználó - a felhasználó proskrolit tartály egy felugró ablakban. Ebből a célból a héj lesz tönkölybúza CSS tulajdonság overflow egyenlő auto. Most meg kell dolgozni által szervezett rendezvényen a plugin úgy, hogy helyette egy ilyen objektumok a HTML.
Művét a felugró lesz felelős entitás _JPopup. Ő is az a módszer, init (), amely „rángás”, amikor az oldal betöltődik. Ebben az eljárásban a bővítmény hozzá a működéséhez szükséges html tag a szervezetben.

Csak az inicializálás felugró érdemes gondolkodni, hogyan fog zárni. Úgy gondolom, hogy a legtöbb ember már megszokta, hogy az a tény, hogy ha rákattint a tartalmi kívül a felugró maga felugró be kell zárni. Ebben az esetben a felhasználó nem kattint bármilyen tartalom ezen kívül a blokk $ popupBlock, mint ő 100 százalékos méretét és a legnagyobb z-index. Kiderült, hogy be kell zárni a felugró kattintás után $ popupBlock. Ehhez adjuk hozzá a init () metódus a következő kódot:

Sam _JPopup.hidePopup () metódus megbeszéljük később.
Most, hogy a móka része - a megjelenése popup. Először meg kell tudni, hogy mi az egység lesz popup. Sok lehetőség, hogy meghatározza, hogyan kell végrehajtani egy plugin, mely blokk kell venni. Például, továbbítja szelektor, mint a paraméter, vagy pedig továbbítja közvetlenül a jQuery objektumot. Azt is szeretnék dolgozni jQuery módszerek, és így képes lenne okozhat megjelenése popup hasonló módon: $ ( '# someId) showPopup () ;. Ehhez adjuk hozzá a jQuery módszer:

Mindez teszi ez a módszer - egy objektum módszer _JPopup showPopup (), és átmegy a jQuery objektumot elem, amelyhez a funkció alkalmazták. Aztán, hogy ne zavarja a lehetőségét végző lánc módszer, amely visszaadja ezt.
De a módszer _JPopup.showPopup (), és megmutatja nekünk a helyes popup.

Nézzük meg ezt a módszert. Már a kezdetektől fogva azt mutatják, egy áttetsző alapon. Ha a felhasználó a IE8 és alsó háttérben csak megjelenik, ha a felhasználó egy civilizált böngésző - a háttérben fog zökkenőmentesen és áttetsző miatt CSS tulajdonságokat homály. A fading elérjük alkalmazásával fadeTo módszer ( „lassú”, 0,7). Ha a tartalom az oldal proskrollen, és mivel a háttér regisztrálva position: absolute, ez nem írja felül az összes tartalmat. Ahhoz, hogy ez nem történt meg, meg fogja változtatni a css értékek felső és bal oldali pontosan annyi volt proskrollen dokumentumot.
Akkor tiltjuk a tekercset test felírja „túlcsordulás”: „rejtett” és ugyanakkor, hogy ez a szélessége megegyezik a dokumentum szélességét mínusz a szélessége a tekercset. Mivel a különböző operációs rendszerek és különböző böngészők lapozzunk szélessége különböző lehet (néhol akár nulla), van, hogy a (széles) meghatározni. Erre szoktam a kódot, amely egyszer valahol. Őszintén szólva nem is emlékszem, hol. De még mindig segít nekem közvetlenül szélességének meghatározásakor a tekercset. Tekintettel arra, hogy a tekercset szélessége nem lehet változtatni bármelyik böngészőt úgy, hogy minden egyes alkalommal, hogy nem vesztegeti az idejét a helyét, akkor létrehozunk egy változót egyenlő null, és csak akkor egyenlő null fogja meghatározni a szélessége a tekercset, és rendelni a változó értékeit . Ebben az esetben, ha az ismételt kezelés, akkor nem pazarolja a drága időt.

Aztán kapunk HTML tartalom popup. Ehhez használja az F-CIÓ jQuery klón (). Természetesen lehet menni egy kicsit más módon, és helyezze be bőrünk az objektumot, amire alkalmazták showPopup módszert, és miután a záró popup vissza vissza a helyére. De ebben az esetben, ha a felugró van például INPUT - meg kell nyomon követni a takarítás. Általában úgy tűnt nekem, hogy felesleges lenne funkciót. Szóval Megkaptuk a szükséges HTML-tartalom a popup. Most helyezze be a bőrbe. És mi helyezze cserélni az egész html, aki a borítékot. Ez biztosítja, hogy ha hirtelen ott volt egy másik felbukkanó - nem hozza magával. Nos, a show () metódus helyett a display: none shell display: block.
A felugró tartalom „felülről” a többi, szükséges, hogy regisztrálja a legnagyobb z-index. És mivel a célunk az, hogy összehangolja felugró közepén. Ahhoz, hogy ezt elérjük, hogy ez az érték a bal és a felső 50% -ának. Most a bal felső sarokban a felugró közepén van az oldal. És az oldal közepén volt egy felugró Center kell, hogy ez a negatív margin-left és margin-top felével egyenlő a szélessége és magassága, ill. Kimondta, hogy a logika egy külön eljárás setAlign:

Ebben az eljárásban figyelembe vesszük azokat az eseteket, ahol a méret a felugró ablak mérete nagyobb. Ebben az esetben állítsa be a margin-left és margin-top felével egyenlő szélességű és magasságú felugró szorozva -1 - csak egy része a felugró fog tűnni, és nem lesz látható a felhasználó számára. Ezért ellenőrizze, hogy a fél szélessége a böngészőablak kevesebb mint a fele a szélessége a felugró (Lobo könnyebb, ha - ablak szélessége kisebb, mint a szélessége popap) - „margin-left” egyenlő lesz az ablak felét szélességét. Plusz mi otbivochku 10 pixel felugró hogy ne tapadjon a széle a doboz.
Szeretnék visszatérni az esemény kattintással a felugró, majd a felugró zárva van. Ha hagyjuk mindent úgy, ahogy van - a felugró zárva lesz akkor is, ha a felhasználó, hogy kattintson a tartalom popup. Ahhoz, hogy megoldja ezt a problémát, azt használják a hatás akkor események felszínre jQuery. Ahogy négylábúak ha befogják rejlik a div és a felhasználó rákattint a span - kiold esemény Span, majd egy esemény bekövetkezik, a díva. Hogy oldja meg a problémát, egyszerűen megakadályozzák kiemelkedés események szerinti stopPropagation ().
Ez is ugyanolyan ígértem, hogy leírja a módszert lezáró popup. Ez nagyon egyszerű lesz:

Módszer elrejti héj popap módszerével elrejtése (). Ugyanez a módszer elrejti felugró háttérben. Aztán vissza a lehetőséget, hogy lépjünk a test és ad neki az eredeti szélességét. És írni vneshnuyuyu funkciót is, amely okozhat egy felugró zárni „kézzel”. Például, ha rákattint a „Zárás felugró”

Most például van egy blokk

Mindössze annyit kell mutatni egy felugró - hívja a módszer $ ( '# felugró) showPopup () ;.

Elég már govnokodit (
Azt akarom, hogy lőni az embereket, akik szeretik, hogy tolta html stílusokat js. És akkor találnak méltó cikket.

És ha meg akarom változtatni a háttér színét? És különben is, én már a minimum extra számítási JS és CSS maximális írástudó

ha nagyon durva, csak lógni 1 osztály. Rave elég írásához töprengett a problémát.

Mivel a különböző operációs rendszerek és különböző böngészők lapozzunk szélessége különböző lehet (néhol akár nulla), van, hogy a (széles) meghatározni.
És miért határozza meg?

Egyetértek a css. A telek, amelyek alkalmazták ezt a felugró ez jól végrehajtani. És html nem lehet beilleszteni a js-a, és azonnal ki a szervezetben.
De ha adtam pontosan példát kellene írni - ez vsavte ott, ez itt ... Persze, felveheti a dobozban css fájlt. De a kedvéért a két osztály lesz, hogy egy külön kérést a szerver. De én még bosszantó, ha az Ön számára, hogy szerzett egy plugin hozzá kell kódot html, add meg a kódot a css, szaladgálni tambura és egy számítógépet az többé manipuláció ...

És ha meg akarom változtatni a háttér színét?
Természetesen mindezen értékek vehetők a változókat.

Természetesen mindezen értékek vehetők a változókat.
Ehhez tenném p *** iszap tönkreteszed seprű, őszintén, ha map adott js változó - ezt befejezni. Lásd valamit poobnoe a kódot nem akarja:

Azt mondják, valószínűleg ismét: a stílus a css, js az összes kódot, West elrendezés html.
html tudunk a változókat js ha azt feltételezzük, hogy a dugó fogják szállítani, mint egy kulcsrakész megoldás, „csak adj egy hívást.”
Egy nagy projekt html jobb hogy bizonyos template fájlok, különösen, ha azt mondta, van egy nagy projekt már egy template rendszer és egy kényelmes velük a munkát.
De a kedvéért a két osztály lesz, hogy egy külön kérést a szerver.
Normál ember csatlakozik a fő stílusok közül (kar vagy kollektor nem számít), további kérések is.