Cum Se Face Un Popup în HTML

Cuprins:

Cum Se Face Un Popup în HTML
Cum Se Face Un Popup în HTML

Video: Cum Se Face Un Popup în HTML

Video: Cum Se Face Un Popup în HTML
Video: Create a Simple Popup Modal 2024, Noiembrie
Anonim

Crearea unei ferestre pop-up în HTML se face folosind biblioteca jQuery, care vă permite să integrați un gestionar de evenimente într-o pagină web și astfel să fie posibilă afișarea conținutului activ al site-ului.

Cum se face un popup în HTML
Cum se face un popup în HTML

Instrucțiuni

Pasul 1

Deschideți pagina site-ului HTML în editorul de text pe care îl utilizați pentru a scrie codul dorit. De asemenea, puteți utiliza utilitarul Windows Notepad standard pentru a insera o fereastră pop-up. Pentru a face acest lucru, faceți clic dreapta pe fișierul HTML și selectați „Deschideți cu” - „Notepad”.

Pasul 2

În secțiunea document, creați un strat care va gestiona jQuery:

Pasul 3

Apoi, trebuie să setați numele ferestrei popup. Pentru a face acest lucru, puteți utiliza anteturile HTML cu niveluri:

Titlul ferestrei

Pasul 4

După aceea, setați textul care va fi afișat în fereastră folosind scriptul pentru a crea un paragraf:

Text

Pasul 5

Apoi creați un strat cu clasa close_win pentru a închide fereastra pop-up, înainte de a închide mânerul anterior:

Închideți o fereastră

Pasul 6

Includeți biblioteca jQuery în fișier adăugând eticheta necesară între descriptorii documentului. De exemplu:

Pasul 7

După aceea, introduceți codul pentru a afișa fereastra pop-up:

$ (function () {

$ ('# Arată'). Ascunde ();

Pasul 8

Apoi, trebuie să gestionați evenimentul în care utilizatorul a apăsat butonul mouse-ului pentru a invoca fereastra pop-up și a gestiona închiderea ferestrei. Pentru aceasta, introduceți următorul cod:

$ („# Click-me”). Faceți clic pe (funcția () {$ („# show”). Fadein (300);})

$ („# Close_win”). Faceți clic pe (funcție () {$ („# show”). FadeOut (300);})

& lt / script>})

Acest program gestionează utilizatorul apăsând butoanele pentru apelarea ferestrei pop-up și făcând clic pe link pentru a o închide.

Pasul 9

Pentru a afișa fereastra pop-up pe pagină, puteți utiliza linkul clasei click-me care a fost specificată în codul de mai sus. Pentru aceasta, introduceți următorul cod în corpul documentului:

Faceți clic pentru a afișa fereastra pop-up

Recomandat: