Modalitate fereastră pe jquery

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

Articole similare

Pagina anterioară