Popup - fereastra pop-up, script-uri, script java PLO
În acest articol, voi descrie principiul script-ul și proprietățile CSS necesare prin manipularea valorilor din care sunt realizate efectele dorite PopUp pop-up.
Și așa, ca de obicei logica. Apel PopUp se face de obicei după acțiunile utilizatorului kakihto, acesta poate fi doar pe pagina de descărcare în browserul utilizatorului, și faceți clic pe link-ul sau ce obiect pe pagină. Dar, în acest exemplu, se va concentra asupra a doua opțiune, există un apel ferestre pop-up bydet efectuate dupa click pe link-ul - click eveniment.
Pentru a face acest lucru, atribuiți ID-ul atributul link-ul. și atribuie acest eveniment clic pe link. a cărei funcție este afișată pe fereastra pop-up va fi numit PopUp.
Și trimite HTML ca un parametru pentru funcția de script-ul nu este foarte convenabil. Prin urmare, sa decis să transfere funcția parametru în sine obiect DOM care conține dreptul de a afișa conținut într-o fereastră pop-up. De asemenea, a trecut la obiectul funcție care va fi atribuit evenimentului clic pentru care funcția este numită fereastra de afișare a PopUp.
Se pare, după cum urmează:
Iar HTML pentru acest exemplu ar arata astfel:
Acum, o descriere a scenariului și a funcțiilor sale. Descrierea va fi pentru MooTools script exemplu POP-UP, tk ambele variante difera una de alta, doar sintaxa caracteristice pentru aceste biblioteci.
Și astfel, la evenimentul de pe pagina web de încărcare - eveniment domready. PopUp funcția invocată (obj, trigonometrie);. care sunt transmise ca parametrii de intrare: o referință de opoziție care conține codul HTML pentru a fi afișat într-o fereastră pop-up, precum și o trimitere la obiectul DOM care va fi atribuit evenimentului faceți clic pe clic.
Codul POP-UP script Mootools.
Și ce face ca această funcție PopUp. După apelul ei creează un var HTML variabilă;. care va conține HTML, DOM obiect transmis de primul parametru de intrare - obj. După ce a primit HTML necesară pentru afișarea într-o fereastră pop-up, eliminați obiectul din documentul DOM folosind funcția distruge.
Pe lângă corp sozdaetsya variabilă. care va conține un link către site-ul BODY a documentului. este în organism. containerul va fi plasat ferestrele PopUp.
După aceasta se creează o variabilă HTML - care conține fereastra pop-up markup HTML generat cu conținutul plasat în ea din variabila HTML.
Următorul punct - așa cum am menționat mai devreme în acest articol, PopUp - de obicei folosit pentru a atrage mai multă atenție pentru utilizator, sau o concentrare mai mare asupra conținutului din fereastra pop-up. Prin urmare, pentru o mai mare eficiență, este recomandabil să se întunece restul conținutului paginii web, acest lucru creează un nou element HTML cu ID-ul câștiga. precum și plasate în orice fereastră pop-up HTML code. După ce obiectul este plasat în corp. Acest obiect va bloca întreaga pagină, iar fundalul este setat la semitransparent PNG.
Apoi, codul este un showWin funcție (). dar mai întâi voi descrie unele dintre un cod care apelează această funcție, precum și ascunde PopUp.
Cod de apel și de tip pop-up ascunde:
atribuindu Deci, inițial, un eveniment click pe un element al doilea parametru de intrare la funcția, și funcția de apel eveniment care afișează pop-up. și apoi alocați clic pe elementul eveniment cu $ ( „anula“). care este în ferestrele pop-up container, și să alocați acest ecran proprietate eveniment CSS: nici unul; element $ ( 'câștiga'). ascunzând astfel popup.
Acum descrierea funcției showWin (). Containere care afișează $ ( „câștiga“) și, prin urmare, arată fereastra de tip pop-up.
Și astfel, după instalarea display: block; $ Container ( 'câștiga');. estompată de toate conținutul paginii, și apoi, containerul $ ( „pop-up“). stabilește anumite proprietăți CSS. În prima familie este display: block;. apoi imediat deplină transparență opacitate: 0. și după aceea se calculează dimensiunea ferestrei pop-up pentru poziționarea corectă în mijlocul ferestrei browser-ului. Acest lucru este foarte important, deoarece fără display: block;. Funcția getSize () nu se poate calcula în mod corect dimensiunea elementului.
După setarea proprietăților sus și din stânga. re-atribui valoarea de opacitate este egală cu unu. În ceea ce privește calculul aici este foarte simplu: vom calcula lățimea ferestrei browser-ului, împărțiți-l în jumătate, și o scad jumătate din lățimea ferestrei Pop-UP, la fel calculează poziția de top. Din cauza acestei ferestre pop-up este întotdeauna afișată în centrul ferestrei browser-ului, indiferent de dimensiunea atât a ferestrei browser-ului și blocul în sine $ ( „pop-up“).
Acum, descrierea proprietăților CSS.
Pentru #win - cu siguranță lățimea și înălțimea până la 100%, și poziționarea absolută cu partea de sus: 0 și stânga: 0. precum și afișaj: nici unul.
Pentru #popup Blocați - asigurați-vă că poziția: fix. dacă altcineva realizează un sprijin IE6 pentru proiectele lor, în acest articol veți găsi o cale de a rezolva problema cu poziția: fix - Poziție: fix
Asta e tot, restul pentru gustul tau :)
A se vedea, de exemplu, pentru Mootools: PopUp Mootools.
Descărcați un exemplu pentru Mootools: PopUp Mootools.
A se vedea, de exemplu, pentru jQuery: PopUp Jquery.
Descărcați un exemplu pentru jQuery: PopUp Jqueryr.
Bună întrebare. Soluția de rezolvare a acestei probleme va apărea pe exemplul transmisiei ca variabilă în Pop_up, calea către imaginea.
În sine este stocat în link-urile href variabile, care, atunci când ați făcut clic în funcție de showWin valoare href este transmis, de exemplu # img / 1.jpg.
Codul HTML este după cum urmează:
cod:
Arbitrare HTML code.
Aici, din link-urile care au efectuat clic, preia valoarea href și a eliminat semnul liră, iar showWin de apel funcția devine o cale curată imaginii.
Pur si simplu src înlocuit la imagini în fereastra pop-up pe href obținute de la:
Cod. $ ( '# Popup img') Attr ( 'src', Var).;.
Vezi nou exemplu: pop-up-2
Descărcați un nou exemplu: popup-2.zip
Vă mulțumim pentru script-ul, cum ar fi în căutarea. Și spune-mi cum să funcționeze PopUp (obj, trigonometrie), finisaj pentru a actualiza astfel încât să spunem fereastra părinte atunci când fereastra este închisă. În fereastra pop-up, plasați o acțiune (utilizator pentru a introduce date în formularul) și necesitatea de a actualiza fereastra principală atunci când fereastra este închisă. Cum de a extinde funcția PopUp pentru a declanșa o actualizare a ferestrei principale?
Multumesc anticipat pentru ajutor.
Prompt și cum să actualizați fereastra părinte atunci când se închide fereastra pop-up?
Spune-mi, te rog, și în acest fel pot fi transmise nu se leagă la codul de imagine și html. Aceasta este, în pagina mea, există câteva link-uri care ar trebui să fie într-o fereastră pop-up pentru a arăta diferite forme? Multumesc anticipat!
realizare elementară - pentru a forma o matrice cu elemente care conțin sub formă de cod:
Cod: var arrForm = [ '
„“„“„];În ceea ce privește actualizarea fereastra părinte:
în cazul în care ($ ( 'anula')) $ ( 'anulare') addEvent ( 'clic', funcția () $ ( 'câștiga') setStyle ( 'afișare', 'nici unul') ..;
window.location.reload ();
>);
>
Foarte interesant exemplu - dar îmi pare rău - eu sunt doar încep să înțeleg toate astea - spune-mi cum să încărcați pop-up-meniu la o dată când se încarcă pagina.
Ai nevoie de a apela showWin funcția () funcție la fel ca aceasta:
Pentru PopUp Jqueryr bug fix în popup.js, a detectat o dată eticheta de închidere
Cod: var HTML = "
Stabilit la:
Cod: var HTML = "
Această eroare a fost văzut în IE7 - fereastra nu apare, uneori IE ajută :)
Spune-mi cum se schimba umbrirea fundalului?
Vă mulțumim!
Pentru umbrire de fundal este utilizat imagine semi-transparent PNG, este într-un dosar
„Img / win.png“, înlocuiți-l cu imaginea sa cu același nume de fișier și toate.
Pentru #win în css este mai bine să se înregistreze poziția: fix, dar nu absolută, pentru că absolută atunci când există o problemă)) la derularea prin ferestre
Cum de a extinde fereastra pop-up-fereastră? Pentru ca imaginea să fie afișată - mult mai mult din ea. Și se pare că ea a fost mutarea la spectacol.
Acesta a fost mult timp în căutarea acestor informații, vă mulțumesc.
>>> sergei
În CSS, specificați lățimea dorită a ferestrei
De asemenea, am nevoie pentru a deschide fereastra automat atunci când se încarcă pagina, dar chiar și cu o întârziere.
ieșire automată a încercat să facă este pus
$ (Document) .ready (funcția () PopUp ($ ( '# obj'), $ ( '# Trigg'));
showWin ();
>);
în script - nu funcționează. Și cum să facă întârziere?
Sunt un începător și în acest ierta pune o astfel de gotovaym opțiune pentru ao înțelege. multumesc anticipat
Am încercat să fac deschiderea automată a funcției fereastră de înlocuire:
$ (Document) .ready (funcția () PopUp ($ ( '# obj'), $ ( '# Trigg'));
showWin ();
>);
Nu funcționează. Puteți da un exemplu gata de a deschide o fereastră atunci când pagina este încărcată pentru analiză. Și ar fi bine controlează, de asemenea, întârzierea de pornire de a face.
Multumesc anticipat.
Da, acest blog este în mod clar necesară untwist mai mult - ceea ce ar fi cât mai mulți oameni știu despre ea
Elena, de a promova blog-ul de capacitatea lor, de experiență și de timp liber, dacă aveți sugestii voi fi bucuros pentru a discuta despre e-mail în subsol.
Ajută-te rog. Am nevoie pentru a forma și textul a fost diferit și a avut imagini diferite. De exemplu, atunci când faceți clic pe capacul cu jocul. Urcă-o fereastră cu informații despre joc și skrinProboval matrice dar ceva nu poluchaetsya.Vylozhite exemplu gata pliz
Ev, încercați acest Highslide plugin
Băieți se răcească script-ul. Vreau să-l utilizați pentru un magazin online. spune-mi cum să facă acest lucru. Există o pagină care arată produsul și numărul său de identificare. apăsați butonul COMANDA> apare o fereastră în care mărfurile au introdus numărul și forma de hrănire a datelor. Cine poate face pliz funcții sursă eu înșiși nu înțeleg nimic
Alexander, trebuie să introduceți aici forma corespunzătoare de marcare HTML cu un id de intrare în
Arbitrare HTML code.
Am o imagine pe masă, imaginea se schimbă atunci când treceți cursorul pe ea
, Am încercat să atașați orice fereastră de tip pop absenteism
pisoedinit doriți ca această fereastră să karninke, care este în tabel, și animat
problema este că totul de pe site-ul este deplasat.
Spune-mi te rog, cum se face acest lucru ar fi atunci când faceți clic în afara eșantionului Diva, și anume, în fundal, atunci când faceți clic pe o fereastră pop-up, de asemenea, se închide.
Spune-mi cum să fac pentru a închide fereastra atunci când faceți clic pe fundal?
Buna ziua! Te rog spune-mi. Totul este clar, în cazul transferului de imagini, precum și modul de a transfera instrument html?
Înțeleasă în pagina HTML în div probă inserată iframe
$ ( '# Popup iframe') attr ( 'src', Var) .;
Prompt, eu nu pot face este să se deschidă la site-ul de pornire.
mutuls utilizare.
window.addEvent (PopUp 'domready', funcția () ($ ( 'obj'), $ ( 'Trigg'));
showWin ();
>);
Spune-mi, te rog, și în acest fel pot fi transmise nu se leagă la codul de imagine și html. Aceasta este, în pagina mea, există câteva link-uri care ar trebui să fie într-o fereastră pop-up pentru a arăta formă diferită în cazul în care pozhalusta Mozhga da un exemplu?
Podskazhyte te rog, am nevoie pentru a aduce un buton pentru a face două lucruri
Prima adaugă un produs în coș în coș
O a doua fereastră pentru dvs. ieșit la suprafață în coș
La fel ca masa de prânz lor?
multumesc anticipat
Vă rugăm să ajute cu butonul, deoarece atârnă executarea LVA
O îngrijire a pielii cuprinzătoare Timp Înțelept
Cum să etoy aceleași butoane și cravată
în coș
Vreau să pop-up imaginea a fost de 400 înălțime.
Am pus în codul
atribut înălțime este ignorată
Buna ziua!
Prompt, dacă este posibil să se facă un pop-up, astfel încât să apară numai în cazul în care un vizitator nu face clic pe link-ul de pe această pagină? În cazul în care a trecut, astfel încât să nu apară?
Aș fi foarte recunoscător dacă ați răspuns!