Modalitate fereastră pe JQuery
Evaluarea Web-hosting: 8 din 10 cu 325 de evaluări
Cum se face o fereastră modală (popup) pe JQuery
Pentru cei care doresc să vadă fereastra modală, faceți clic pe butonul DEMO LESSON:
O fereastră modală pentru site-ul dvs. se poate face foarte repede. Pentru aceasta, vom lua două biblioteci: Jquery și pluginul BPopup. Biblioteca Jquery și plug-in-ul BPopup sunt produse open source, ceea ce înseamnă că le poți folosi în mod liber pentru nevoile tale.
De asemenea, pentru a crea o fereastra pop-up pentru site-ul dvs., vom crea trei fișiere: index.html, main.js și style.css.
index.html este fișierul nostru principal în care vom afișa o fereastră pop-up și celelalte elemente ale acesteia.
main.js - conține logica ferestrei modale
style.css - aici scriem stilurile de bază pentru fereastra modală
Fișier index.html
În fișierul index.html am conectat bibliotecile Jquery și Bpopup. Apoi main.js.
Aici, voi face un punct important: dacă utilizați biblioteca jquery, trebuie să-l a fost implicat este primul, și numai apoi alt fișier js, în caz contrar fereastra modal nu va funcționa.
Fișierul Main.js
am scris trei funcții în fișierul main.js: bclose (), bopen (), setTimeout în blocul document.ready.
bclose () - Funcția de închidere a ferestrei modale când faceți clic pe "CLOSE"
bopen () - funcția după cum probabil ați ghicit, afișează o fereastră modal atunci când faceți clic pe „fereastra APEL modal“ buton
Blocul $ (document) .ready indică faptul că executăm codul în interiorul acestui bloc numai atunci când toate elementele DOM ale paginii sunt încărcate
Funcția setTimeout - vă permite să executați metoda cu întârziere. Avem această întârziere setată la 1 secundă = (1000ms)
VK.Widgets.Group (.) După cum probabil ați ghicit, este necesar pentru a încărca widgetul VKontakte în fereastra modală
$ ('# popup_vk'). bPupub () - sună fereastra pop-up
File style.css
În fișierul style.css, setăm stilurile pentru fereastra și butoanele modale.
După cum puteți vedea, este foarte ușor să faceți o fereastră modală (pop-up) pentru site-ul dvs. Web. Puteți descărca un exemplu din acest link. După descărcarea exemplului, trebuie să dezarhivați și să executați fișierul index.html. Dacă aveți încă întrebări, întrebați-le și vom răspunde cu plăcere.
Alăturați-vă grupului vk și urmăriți materiale noi.
Accesați secțiunea închisă a site-ului