Modal fereastră cu css și jquery

Modal fereastră cu CSS și jQuery

Vorbind despre diverse tehnici de construire a site-urilor, ar fi ridicol să nu spui despre unele modalități de a crea ferestre modale. Nu vom discuta despre scopul, utilitatea și problemele emergente ale utilizării ferestrelor pop-up, modale. Să analizăm doar unul dintre numeroasele exemple de a crea astfel de ferestre.
Există situații în care nu există posibilitatea de a utiliza plug-in-uri speciale, de exemplu, cum ar fi fancybox și prettyPhoto. astfel încât ar trebui să înțelegeți cum vă puteți crea propria fereastră modală.

Modal fereastră cu css și jquery

Să vedem cum să facem acest lucru:

Să începem prin adăugarea cu următoarele atribute:

  • href - #? w = 500 specifică lățimea ferestrei
  • rel - atribut unic pentru fiecare fereastră
  • class = "poplight" - clasa pentru a afișa o fereastră pop-up

Vedeți fereastra în acțiune - Lățime = 500px

Apoi, trebuie să creați un markup încorporat pentru fereastra pop-up. Puteți plasa oriunde pe pagină, de exemplu, în partea de jos a conținutului. Rețineți că identificatorul pop-up corespunde atributului rel al etichetei
Aceasta va lega împreună link-ul și fereastra pop-up.

Și astfel, odată cu plasarea ferestrei noastre pe pagină, ne-am dat seama, acum să o aranjăm cu stiluri, să-i dăm, ca să spunem așa, un aspect decent.

CSS Layout

Pentru claritate, am scris câteva explicații privind parametrii stilului ferestrei noastre. Deoarece ferestrele pop-up pot avea mărimi diferite, nu specificăm popup_block în CSS de la marginea ferestrei, se calculează dimensiunea necesară, aceasta este doar sarcina pentru jQuery.

Odată cu formarea ferestrei și a aspectului ei folosind CSS, cred că nu vor exista dificultăți speciale. Stilurile pot fi scrise direct pe pagina HTML, între etichete și . și puteți reda un fișier separat al stilurilor dvs., de obicei un fișier stil.css. sau ceva de genul asta.

Configurarea JQuery

Pentru funcționarea completă a ferestrei modale, trebuie să vă conectați jQuery, care nu este familiarizat cu activitatea acestei biblioteci, poate citi JQUERY - INTRODUCERE.

Ei bine, vom merge mai departe. Puteți descărca ultima versiune de JQuery de pe site-ul bibliotecii sau puteți utiliza un fișier separat plasat în adâncurile Google, conectându-l la document, în secțiune înainte de eticheta de închidere . plasând această linie:

De asemenea, avem nevoie de plugin-ul propriu-zis, îl conectăm de asemenea la pagină, totul este în fața etichetei :

În pasul următor, luați în considerare umplerea și funcțiile pluginului jquery, pentru a activa fereastra pop-up, codul conține câteva explicații pentru a înțelege mai bine ce facem.

JQuery plugin

concluzie:

Data viitoare vă voi spune și vă vom arăta cum să adăugați o bară de defilare în fereastra modală. și sigur, mulți vor fi interesați să învețe despre integrarea formularului de contact și a altor obiecte terță parte într-o fereastră pop-up. Deci, nu vă pierdeți în web și rămâneți la dispoziție!

Asta este! Sper că a apărut o lecție mai utilă.

Aș fi recunoscător dacă susțineți proiectul - adăugând un blog la excepțiile AdBlock și partajați un link către intrarea în rețelele dvs. sociale:

Articole similare

Pagina anterioară

Pagina următoare