Windows modal cu un fundal neclar pe CSS3. Creați o fereastră pop-up pop-up Modal JQuery JQuery cu Dimming
Modal Windows sunt o parte integrantă a designului web modern, folosindu-le, dezvoltatorul poate recurge la metoda Divergenței pe o singură pagină și să nu arunce un vizitator în paginile auxiliare. În această lecție, ne vom uita la modul de a crea ferestre modale minunate, cu un fundal neclar pentru site-ul folosind jQuery și CSS3. Datorită acestor reguli, vom crea un fundal neclar când apare fereastra, care va da vizitatorului numai la informațiile necesare pe site.
Windows modal cu fundal neclarat pe CSS3
Știri economice cele mai bune doar aici: fracțiune
Animația ferestrei va fi instalată într-o astfel de spomă că atunci când apăsați CMOS, aspectul, fereastra va fi animată de sus în jos, în timp ce blur de fundal este îmbunătățită automat.
Pasul 1. HTML.
Vom avea un container în care va fi conținut: titlu, descriere, adăugăm o clasă pentru un buton cu o clasă. tagglemodal. Pentru a deschide fereastra modală:
Titlu
Descriere
Titlu pentru fereastră
Taburile sunt un lucru foarte interesant și convenabil atunci când creați un site, vă permite să organizați în mod corespunzător informații, salvând un spațiu mic pe site.
Apoi trebuie să adăugăm o clasă modal este activAceastă clasă va fi responsabilă pentru apelarea ferestrei modale, modal__header. Responsabil pentru titlu și fereastra de stilizare.
Pasul 2. CSS.
Transportul ne mutăm la stilizare, primul pas va fi clasa betton.care va răspunde cum ați ghicit deja, pentru butoanele de pe site, setăm parametrii de afișare corectă pentru aceasta:
Buton (fundal: Nici unul, fundal-clip: padding-cutie; Afișaj: Border inline; Border: 0; Utilizator-Selectare: Nici unul; -Webkit-touchout: Nici unul; -Webkit-aspect: buton; -Webkit-utilizator -Select: none; -moz-user-Selectați: Nici unul; -ms-utilizator-selectați: Nici unul;)
Stilurile sunt destul de simple, sunt stocate de un dosar separat și nu ar trebui să provoace dificultăți în editarea acestora de la dezvoltator care a întâlnit vreodată CSS.
Pasul 3. JS.
Ultimul nostru, dar nu mai puțin important, va fi instalarea fundalului de estompare automată Când apare meniul, precum și clicurile de referințe, regulile mici ne vor ajuta Js.:
$ ("Corp"). AddClass ("este-neclar"); $ ("Tagglemodal"). Pe ("clic", funcția (eveniment); $ ("modal"). TogleClass ("is-active"); $ ("corp"). TogleClass ("este-neclar" );));
Ca rezultat, primim ferestre modale minunate care se bucură de privirea unui postparter și nu vă absorbi designul.
Vorbind despre diferitele tehnici de inginerie ale site-urilor, ar fi ridicol să nu spunem, despre unele modalități de a crea ferestre modale. Nu vom vorbi despre numirea, utilitatea și problemele emergente de utilizare a ferestrelor pop-up, ferestrele modale. Vom analiza doar unul dintre numeroasele exemple de a crea astfel de vânturi. Există situații în care nu există posibilitatea de a utiliza pluginuri speciale, de exemplu, cum ar fi, deci merită să înțelegeți cum vă puteți crea propria dvs.
Să vedem cum să o facem:
HTML.
Să începem prin adăugarea de etichete cu următoarele atribute:
href - #? W \u003d 500 Specifică lățimea ferestrei
rel - un atribut unic pentru fiecare fereastră
clasa \u003d "Pomlight" - clasa pentru afișarea unei ferestre pop-up
<
a href=
"#?w=500"
rel=
"popup_name"
class
=
"poplight"
> Vedeți fereastra în acțiune - lățime \u003d 500px
Vedeți fereastra în acțiune - lățime \u003d 500px
Apoi, trebuie să creăm o marcaj încorporată pentru fereastra pop-up. Puteți plasa oriunde în pagină, bine, de exemplu, în partea de jos a conținutului. Rețineți că identificatorul ferestrei pop-up corespunde atributului rel. Etichetă Acest lucru va asocia legătura și fereastra pop-up împreună.
Titlu
Orice text pe care inima ta
Și așa, cu plasarea ferestrei noastre pe pagina ne-am dat seama, acum să-l punem cu ajutorul stilurilor, să-i dau, ca să spunem așa, o vedere decentă.
CSS Loaf.
Pentru a consuma claritate, am prescris câteva explicații cu parametrii de stil ai ferestrei noastre. Deoarece pop-up-urile pot avea o dimensiune diferită, nu specificăm în CSS popup_block. Marginile ferestrei, calculează dimensiunea necesară, este doar o sarcină pentru.
Cu formarea ferestrei și aspectul său cu CSS, cred că nu vor exista dificultăți speciale. Stilurile pot fi înregistrate direct pe pagina HTML, între etichete
și și îl puteți lua într-un fișier separat al stilurilor dvs., de obicei acest fișier stil.css., sau ceva de genul ăsta.
Configurarea jquery.
Pentru munca completă a ferestrei modale, trebuie să conectați jQuery, care nu este familiarizat cu munca acestei biblioteci poate fi citită.
Ei bine, vom merge mai departe. Puteți cea mai recentă versiune de jquery de pe site-ul bibliotecii sau puteți utiliza un fișier separat situat în intestine, conectați-l la document, în secțiunea din fața etichetei de închidere
Plasând un astfel de șir:
În pasul următor, luați în considerare umplerea și funcțiile pluginului JQuery, pentru a activa fereastra noastră pop-up, codul conține câteva explicații pentru o mai bună înțelegere a ceea ce facem.
Plugin jquery.
$ (Document). Gata (funcția () ( // Când faceți clic pe link-ul cu eticheta de atribut de clasă Pomlight și Href de la # $ ("a.poplight"). Faceți clic pe (Funcție () (VAR Popid \u003d $ (this). Attr ("rel"); // obțineți numele ferestrei, este important să nu uitați la adăugarea unui nou nume de schimbare în linkurile Atribute REL Var popurl \u003d $ (acest). Attr ("href"); // obțineți dimensiunea legăturilor atributelor HREF// Cerere și variabile de la adresa URL HREF Var Query \u003d Popurl. Despică ("?"); VAR DIM \u003d interogare [1]. Despică ("&"); var popwidth \u003d dim [0]. Split ("\u003d") [1]; // prima valoare a șirului de interogare// Adăugați butonul de închidere pe fereastră. $ ("#" + popid). Fadein (). CSS ("lățime": număr (popwidth))). Pregătirea ( ""
)
;
// Determinarea marjei (stocului) pentru alinierea în centru (verticală și orizontală) - adăugăm 80 la altitudine / lățime în raport cu lățimile cadrului definite în CSS var popmargtop \u003d ($ ("#" + popid). Înălțimea () + 80) / 2; var popmarleft \u003d ($ ("#" + popid). Lățimea () + 80) / 2; // setați valoarea incidenței $ ("#" + popid). CSS (("Margin-top": - Popmargtop, "margine-stânga": - PopMargleft)); // Adăugați un fundal translucid de întrerupere $ ("Corp"). Adăugați (" "
)
;
// containerul Div va fi înregistrat înainte de etichetă
.
$ ("# Fade"). CSS (("Filtru": "Alpha (opacitate \u003d 80)")). Fadein (); // translucența stratului, filtru pentru stupid, adică Întoarce-te fals; ); // Închideți fereastra și fundalul de negru $ (Document). Pe ("Faceți clic pe", "A.Close, #Fade", funcția () ( // închiderea pe clic în afara ferestrei, adică pe fundalul ... $ ("# Fade, .popup_block"). FADEOUT (FADE () ($ ("# FADE, A.CLOOSE"). Eliminați (); // dispar fără probleme ); Întoarce-te fals; ); );
În general, dacă nu urcați în resturi și nu vă încarcă un cod excesiv Abrakadabra, fereastra noastră minunată modală este gata să lucreze și vă așteaptă gândurile la text sau orice alte informații utile. Cei care doresc să utilizeze o fereastră modală pentru a plasa imagini video sau pe scară largă în ea, am sfătuit încă să folosesc pluginuri de tip special, deoarece exemplul de mai sus este exemplul ferestrei modale, este proiectat mai mult pentru informații ușoare și nu foarte grele , Deși, dacă se dorește, aceasta nu este o problemă.
Data viitoare când voi spune și arăta cu siguranță exemplul și, sigur, mulți vor fi interesați să învețe despre și alte obiecte terțe în fereastra pop-up. Deci, nu vă pierdeți pe web și urmăriți actualizările!
Actualizați: Versiunea DM-modal.js v1.3 (01/15/2017) Fix: Înlocuit funcția depășită (), se utilizează sintaxa HREF * \u003d \\\\ #. Acum, pluginul funcționează cu versiuni relevante ale Bibliotecii JQuery.
Asta e tot! Sper că sa dovedit o altă lecție utilă.
Cu tot respectul, Andrew
3. Exemplu de fereastra jQuery modal cauzată de referință (cu demo)
Cel mai probabil, ați văzut deja o fereastră modală pop-up pe Internet - o confirmare a înregistrării, a alertei, a informațiilor de referință, a descărcării fișierelor și multe altele. În această lecție, voi oferi mai multe exemple pentru a crea cele mai simple ferestre modale.
Creați o fereastră modală simplă pop-up
Vom continua să luăm în considerare codul celei mai simple ferestre modale care va apărea imediat codul jquery.
Codul insert oriunde în corp. Pagina ta. Imediat după descărcarea paginii, fără comenzi, veți vedea fereastra următoare:
Dar următorul cod va fi efectuat după încărcarea întregii pagini din browser. În exemplul nostru, după încărcarea unei pagini cu imagini, o fereastră pop-up simplu va apărea:
Apelarea ferestrei jQuery Modal prin referire la CSS
Următorul pas va fi crearea fereastră modală Când faceți clic pe link. Fundalul se va diminua încet.
Puteți vedea adesea că formularul de intrare și înregistrare sunt localizate în astfel de ferestre. Începem să lucrăm
Pentru a începe, scrieți partea HTML. Acest cod este plasat în corpul documentului dvs.
Apelați o fereastră modală
Textul ferestrei modale
Închide
Text în fereastra modală.
Cod CSS.. Fie într-un fișier CSS separat, fie în
În codul jQuery, atenția principală se va concentra pe poziția ferestrei modale și a măștii, în cazul nostru un fundal gradual.
Atenţie! Nu uitați să conectați biblioteca în capul documentului!
Conectarea unei biblioteci de la Google. Ei bine, direct codul jquery însuși.
Codul jquery.
Destul de des pe site-uri puteți întâlni ferestrele modale și toate sunt folosite pentru diferite sarcini. De fapt, este un instrument destul de puternic care vă permite să faceți interfața site-ului mai interactivă și mai convenabilă. De exemplu, ferestrele modale pot fi utilizate pentru diferite forme, cum ar fi un formular de autorizare, formular de feedback, ordonând ordinea și nu știți niciodată.
În acest post, considerăm un exemplu, cum să facem o fereastră simplă modală folosind jquery și css. Caracteristica acestui exemplu este că nu este necesar aici, cu excepția Bibliotecii JQuery însăși.
Plasați codul ferestrei modale pe pagină:
Închide
Fereastra modală deschisă
Așa cum se poate vedea din markup, blocul ferestrei modale este div cu atributul id \u003d modal_form.care conține elementul id id \u003d modal_close.. Acest element va servi ca un buton pentru a închide fereastra modală, în plus, blocul Block Div \u200b\u200beste situat sub blocul cu atributul ID \u003d acoperirecare servește simultan și de a diminua fundalul. Fereastra modală se va deschide pe link, cu clasa modal.
Pentru modal_form. Am stabilit o lățime și o înălțime fixă \u200b\u200bși apoi am concentrat asupra centrului ecranului. Pentru substratul ferestrei modale ( acoperire) Specificăm dimensiunea lățimii ecranului, umpleți cu transparență, precum și ascunzându-l în mod implicit. Moment special S. z-Index., În fereastra modală, trebuie să fie cea mai mare dintre toate elementele de pe pagină, iar capacul ar trebui să aibă mai multe elemente, cu excepția ferestrei modale în sine.
Acum, la cele mai de bază, acesta este un cod pe JavaScript. Pentru fereastra modală, vor fi folosite două evenimente principale, este de deschidere - faceți clic pe elementul cu clasa modalÎn cazul nostru, aceasta este o legătură și închiderea ferestrei modale, aceasta este o acoperire pe copertă ( acoperire) sau faceți clic pe butonul Închidere, în cazul nostru este un element de vârf cu ID \u003d modal_close..
Prin animată, schimbăm poziția verticală top., precum și transparența opacitateȘi cu aceasta avem un efect interesant. Acest efect este utilizat atât atunci când deschideți fereastra și când este închis. Diferența este că procedura de utilizare a proprietăților pentru blocuri modifică, vizualizând astfel deschiderea și închiderea ferestrei.
1. Fereastra modală pe jQuery "Cutie modală simplă"
2. JQuery Plug "Leanodal"
Afișarea conținutului în ferestrele modale. Pentru a vizualiza plug-in-ul de acțiune de pe pagina demo, faceți clic pe link: Înscrieți formularul sau conținutul de bază.
3. jQuery Plug "ToastMessage"
Mesaje pop-up. Plugin în două versiuni. Într-un caz, mesajele dispar independent, după un anumit timp, în cea de-a doua implementare pentru a închide mesajul, trebuie să faceți clic pe buton.
4. Conținutul pop-up în fereastra modală
Pluginul "dezvăluie". Pentru a vizualiza plug-in-ul în acțiune, faceți clic pe butonul Afișați un modal din pagina demonstrației.
5. Dulapuri de dialog Cute
Faceți clic pe crucea de pe pagina demo pentru a viziona pluginul în acțiune.
6. Fereastra modală Mootools, pluginul Moodialog
7. Topul ecranului pop-up JQuery
8. Fereastra pop-up JQuery
jquery plugin pentru a afișa formularul de feedback în fereastra pop-up.
10. Mootools "LightFace" Plugin pentru implementarea dialogului Facebook
Casetele de dialog Facebook. În plus față de informațiile statice, imaginile, cadrele, cererile AJAX pot fi plasate în fereastră. Multe setări ale plug-in-ului, un instrument foarte puternic. Arată foarte elegant și funcțional. Urmați legăturile de pe pagina demo pentru a vizualiza exemple cu conținut diferit.
11. Fereastra modală jQuery
Caseta de dialog Pop-up NEAT pe jQuery.
12. Windows jquery modal
Cute ferestre modale pop-up. Trei design stilizat. Pagina demo prezintă 3 linkuri pentru a apela Windows.
13. Windows JQuery Modal
Ferestre modale pop-up de mai multe tipuri. Pentru a vizualiza plug-in-ul în acțiune, faceți clic pe link-ul de pe pagina demo.
15. Mesaj de pagină de top pop-up
Mesajul este afișat în partea de sus a paginii, care, la rândul său, este întunecată. Faceți clic pe inscripția "Faceți clic pe mine" de pe pagina demo pentru a vedea mesajul pop-up. Făcând clic pe cruce, o va închide. Implementat cu jQuery.
16. Fereastră modală "Modalbox" pe JavaScript
Implementarea casetelor de dialog modal modern fără a utiliza pagina pop-up și reboot. Pe pagina demo, faceți clic pe butonul START Demo pentru a vă uita la script.
Nu începe Diablo III?
Cum să verificați computerul la spyware
Spyware pe computer