Cel mai recent am întâlnit un gest neobișnuit în managerul de sarcini. ProjectManager a copiat direct textul clientului - "Vreau ca popul să fie ca în vkontakte." Ce înseamnă "ca în vkontakte" nu am înțeles imediat. „Potestit“ pop-up în sots.seti înțeleg ceea ce doresc de la mine - cu un pop-up deschis conținutul principal nu derulează, dar în același timp, în cazul în care dimensiunea de pop-up mai mult decât caseta de utilizator - trebuie să derulați pop-up (conținutul cursului principal, de asemenea nu derulați în acest caz).
Complicată în această sarcină, nu am văzut nimic și am continuat să o pun în aplicare. Logica a fost după cum urmează: când deschidem un pop, dăm bodyoverflow = ascunse. și când îl închideți, îl returnați la mașină. Am pus pop-ul într-un wrap div și l-am dat peste floare = auto. în cazul în care dimensiunea ferestrei este mai mică decât dimensiunea ferestrei pop-up - utilizatorul o poate derula.
Sub OS X, totul a funcționat perfect. Dar nu am luat în considerare o nuanță - în alte sisteme din browser există o parolă constant vizibilă care are lățimea ei. Și dacă faci doar un bloc care are o defilare, preaplin ascuns - parcurgere dispare lățimea blocului este mai mare decât lățimea de parcurgere și a conținutului „salturi“. Apoi am decis să scriu un plugin care rezolvă această problemă. Încă o dată, după ce am privit cum funcționează acest popup minunat în vkontakte, am înțeles logica și am continuat să o interpretez.
(Cred că site-urile care nu utilizează jQuery sunt deja rare, așa că am scris un plugin folosind jQuery)
Deoarece am vrut să scriu un astfel de plug-in, pentru care nu era necesar să adăugăm nicio construcție la Html și css, plugin-ul ar trebui să facă totul singur. Pentru început, merită să ne dăm seama care cadru HTML va avea nevoie de un plug-in. Deoarece popul ar trebui să aibă un fundal care să se suprapună conținutului principal, trebuie să apară div în corp, care va fi fundalul propriu-zis. Acesta este primul element. Al doilea este învelișul popului. Este necesar să se asigure că în momentul în care corpul stă ascuns overflow, în cazul în care pop-up nostru mai mare decât dimensiunea ferestrei utilizatorului - utilizatorul poate proskrolit container cu un pop-up. Pentru aceasta, shell-ul va avea o proprietate de overflow css egală cu auto. Acum trebuie să organizați activitatea pluginului astfel încât acesta să înlocuiască aceste obiecte în html-ul nostru.
Obiectul _JPopup va fi responsabil pentru lucrul cu pop-ul. El are, de asemenea, metoda init (), care va "smulge" după încărcarea paginii. În această metodă, pluginul va adăuga etichetele html necesare corpului.
De asemenea, atunci când inițializăm popul, merită să ne gândim cum va fi închis. Mi se pare că majoritatea utilizatorilor sunt deja obișnuiți cu faptul că atunci când faceți clic pe conținut în afara popului, popul ar trebui să se închidă. În cazul nostru, utilizatorul nu va putea să facă clic pe orice conținut din afara blocului popupBlock $, deoarece are dimensiuni de 100% și cel mai mare z-index. Se pare că trebuie să închideți pop-ul după ce faceți clic pe $ popupBlock. Pentru aceasta, adăugați următorul cod la metoda init ():
Metoda _JPopup.hidePopup () va fi discutată mai târziu.
Acum, să începem cel mai interesant - apariția preotului. Mai întâi de toate, trebuie să știm care bloc va fi preotul. Există mai multe opțiuni, cum să implementați indicația unui plug-in pe care bloc să faceți. De exemplu, treceți un selector ca parametru sau puteți trece direct la obiectul jQuery. De asemenea, mi-a plăcut să lucrez cu metodele jQuery și așa am vrut să pot apela un pop într-un mod similar: $ ('# someId') ShowPopup (); Pentru aceasta, adăugați metoda jQuery:
Tot ceea ce face această metodă este numirea metodei obiectului _JPopup showPopup () și trecerea ei a obiectului jQuery al elementului căruia i sa aplicat funcția. Apoi, pentru a nu încălca posibilitatea de a menține un lanț de metode, returnați acest lucru.
Dar metoda _JPopup.showPopup () va afișa popup-ul necesar.
Să analizăm această metodă. De la început, prezentăm un fundal semi-transparent. În cazul în care utilizatorul folosește IE8 și fundal inferior doar apare, în cazul în care utilizatorul folosește un browser mai civilizat - fundalul va lin și este translucid datorită proprietăților css de opacitate. Obținem un aspect neted cu metoda fadeTo ('slow', 0.7). Dacă conținutul paginii este proscrolat și din moment ce fundalul nostru are o poziție: absolut, nu va bloca tot conținutul. Pentru ca acest lucru să nu se întâmple, schimbați valoarea CSS de sus și de stânga exact la fel de mult ca documentul a fost scanat.
Apoi vom dezactiva corpul de defilare în prescrierea „overflow“: „ascunse“ și, în același timp, dau o lățime egală cu lățimea documentului minus lățimea scroll. Deoarece diferitele sisteme de operare și browsere diferite defilați lățime pot fi diferite (în unele locuri chiar zero), avem de a sa (larg) pentru a determina. Pentru asta, am folosit codul pe care l-am găsit odată undeva. Pentru a spune adevărul, nici nu-mi amintesc unde. Dar tot mă ajută corect în determinarea lățimii sulului. Având în vedere că lățimea de derulare nu poate fi modificată în orice browser, astfel încât de fiecare dată când nu pierde timpul pe locația sa, vom crea un egal variabilă nul, și numai în cazul în care este egal cu nul va determina lățimea sulului, și pentru a atribui valoarea acestei variabile . În acest caz, după tratamentul repetat, nu vom pierde timp prețios.
După asta, vom obține conținutul Html al popului. Pentru aceasta, utilizați funcția jQuery clone (). Desigur, ai putea merge un mod putin diferit si se introduce in pielea noastra direct obiectul la care ați aplicat metoda showPopup, iar după închiderea popup-uri să se întoarcă înapoi în poziție. Dar în acest caz, dacă există, de exemplu, inroads în cuplu, va trebui să monitorizați curățarea lor. În general, mi sa părut că ar fi o operație suplimentară. Ei bine, atunci. Am primit html-ul conținutului potrivit pentru pop. Acum îl lipim în cochilie. Și îl inserăm înlocuind tot html-ul din cochilie. Acest lucru este necesar pentru ca în cazul în care a fost brusc o altă pereche - nu se retrage în același timp și ea. Ei bine, cu metoda show (), înlocuiți afișajul: niciun shell cu afișaj: bloc.
Pentru ca conținutul ferestrei pop-up să fie "deasupra" orice altceva, trebuie să înregistreze cel mai mare z-index. Și, de asemenea, sarcina noastră este să aliniem centrul pop-up. Pentru a face acest lucru, dați-i valorile stângi și cele de top de 50%. Acum, colțul din stânga sus al popului este în mijlocul paginii. Și pentru ca centrul paginii să fie centrul popului, trebuie să-i dați marginea negativă - stânga și marginea de sus egală cu jumătate din lățimea și respectiv înălțimea. Puneți această logică într-o metodă setAlign separată:
În această metodă luăm în considerare și acele cazuri în care dimensiunea popului este mai mare decât dimensiunea ferestrei. În acest caz, setați-marja de stânga și marja de-sus egală cu jumătate din lățimea și înălțimea de pop-up înmulțit cu -1 - doar o parte a pop-up va dispărea și nu vor fi vizibile pentru utilizator. Prin urmare, vom verifica dacă jumătate lățimea ferestrei browser-ului este mai mică decât jumătate din lățimea ferestrei pop-up (Lobo mai ușor în cazul în care - fereastră lățime mai mică decât lățimea popap) - „marjă-stânga“ va fi egală cu jumătate din lățimea ferestrei. În plus, realizăm o grămadă de 10 pixeli, astfel încât popul să nu rămână pe marginea ferestrei.
Aș dori să mă întorc la evenimentul unui clic pe popup, după care popul este închis. Dacă vă lăsați la asta, popul va fi închis chiar și atunci când utilizatorul face clic pe conținutul popului. Pentru a rezolva această problemă, am folosit efectul unor evenimente plutitoare în jQuery. După cum se știe, dacă avem un interval în div și utilizatorul a dat clic pe intervalul de timp, evenimentul din span va funcționa mai întâi și apoi evenimentul va avea loc la div. Pentru a rezolva problema noastră, pur și simplu prevenim apariția evenimentului folosind metoda stopPropagation ().
Rămâne numai, așa cum am promis, să descriu metoda de închidere a perechii. Va fi foarte simplu:
Metoda ascunde coaja perechii folosind metoda hide (). Aceeași metodă ascunde fundalul popului. Apoi vom returna posibilitatea de derulare la corp și să-i dați lățimea originală. Și vom scrie pentru el o funcție externă care poate fi chemată să închidă "mâna" pop-up. De exemplu, dând clic pe butonul "Închideți pop"
Acum, de exemplu, avem un bloc
Tot ce aveți nevoie pentru a afișa într-un pop-up este să apelați metoda $ ('popup'). ShowPopup ();
destul de rahat deja (
Vreau să împușc oamenii cărora le place acest html shov cu stiluri în interiorul js. Și apoi ei o consideră demnă de articol.
Și dacă vreau să schimb culoarea de fundal? Și, în general, pentru că a existat un minim de calcule inutile pe JS și un CSS maxim competent
dacă este foarte dur, închideți doar 1 clasă. Destul de delir, începeți să scrieți gândirea lucrurilor.
Deoarece în diferite sisteme de operare și în diferite browsere lățimea parcurgerii poate fi diferită (undeva este în general zero), ar trebui să definim (lățimea).
Și de ce ar trebui să o definim?
Sunt de acord cu CSS. Pe site-ul pe care l-am folosit, este exact modul în care a fost implementat. Și html nu este inserat folosind js-a, dar este inserat imediat în corp.
Dar dacă aș cita exemplul exact, ar trebui să scriu - este aici, aici este ... Desigur, ați putea adăuga un fișier css la cutie. Dar, de dragul celor două clase, va trebui să faceți o cerere separată către server. Dar am fost chiar mai enervant atunci când pentru tine de a fi câștigat un plugin trebuie să adăugați cod HTML, adăugați codul la css, executați în jurul cu o tamburină și un computer pentru a efectua mai manipulare ...
Și dacă vreau să schimb culoarea de fundal?
Bineînțeles, toate aceste valori pot fi extrase în variabile.
Bineînțeles, toate aceste valori pot fi extrase în variabile.
Pentru asta aș fi martor ssanym, sincer dacă aveți o mapare este dată variabilelor js - este terminat. Nu vreau să văd nimic în cod:
O să repet încă o dată: toate stilurile din css, toate codul js, layout-ul de vest în html.
html poate fi pus în variabile js dacă se presupune că plug-in-ul se va livra ca o soluție gata de a "adăuga doar un apel".
Pentru un proiect mare html mai bine aduce unele fișiere șablon, mai ales dacă am spus că este un proiect mare are deja un sistem de șablon și un lucru confortabil cu ei.
Dar, de dragul celor două clase, va trebui să faceți o cerere separată către server.
Oamenii normali conectează aceste stiluri la principalele (mâinile sau un asamblor nu este important) fără alte solicitări.
Trimiteți-le prietenilor: