Paano Gumawa Ng Isang Popup Sa HTML

Talaan ng mga Nilalaman:

Paano Gumawa Ng Isang Popup Sa HTML
Paano Gumawa Ng Isang Popup Sa HTML

Video: Paano Gumawa Ng Isang Popup Sa HTML

Video: Paano Gumawa Ng Isang Popup Sa HTML
Video: Модальные окна (попапы) на HTML CSS JavaScript. Всплывающие окна. Как это сделать? 2024, Abril
Anonim

Ang paglikha ng isang pop-up window sa HTML ay tapos na gamit ang jQuery library, na nagbibigay-daan sa iyo upang isama ang isang handler ng kaganapan sa isang web page at sa gayo'y posible upang maipakita ang aktibong nilalaman ng site.

Paano gumawa ng isang popup sa HTML
Paano gumawa ng isang popup sa HTML

Panuto

Hakbang 1

Buksan ang iyong pahina ng site ng HTML sa text editor na iyong ginagamit upang isulat ang gusto mong code. Maaari mo ring gamitin ang karaniwang utility ng Windows Notepad upang magsingit ng isang pop-up window. Upang magawa ito, mag-right click sa HTML file at piliin ang "Open With" - "Notepad".

Hakbang 2

Sa seksyon ng dokumento, lumikha ng isang layer na hahawak sa jQuery:

Hakbang 3

Pagkatapos ay kailangan mong itakda ang pangalan ng popup window. Upang magawa ito, maaari mong gamitin ang mga naka-tiered na HTML header:

Pamagat ng window

Hakbang 4

Pagkatapos nito, itakda ang teksto na ipapakita sa window gamit ang script upang lumikha ng isang talata:

Text

Hakbang 5

Pagkatapos ay lumikha ng isang layer na may class close_win upang isara ang popup, bago isara ang nakaraang hawakan:

Isara ang isang window

Hakbang 6

Isama ang jQuery library sa file sa pamamagitan ng pagdaragdag ng kinakailangang tag sa pagitan ng mga naglalarawan ng dokumento. Halimbawa:

Hakbang 7

Pagkatapos nito, ipasok ang code upang maipakita ang popup:

$ (pagpapaandar () {

$ ('# Ipakita'). Itago ();

Hakbang 8

Susunod, kailangan mong hawakan ang kaganapan na pinindot ng gumagamit ang pindutan ng mouse upang mahiling ang pop-up window at hawakan ang pagsasara ng window. Upang magawa ito, ipasok ang sumusunod na code:

$ (‘# Click-me’). Mag-click (function () {$ (‘# show’). Fadein (300);})

$ (‘# Close_win’). Mag-click (function () {$ (‘# show’). FadeOut (300);})

& lt / script>})

Hinahawakan ng programang ito ang gumagamit na pagpindot sa mga pindutan para sa pagtawag sa pop-up window at pag-click sa link upang isara ito.

Hakbang 9

Upang maipakita ang pop-up window sa pahina, maaari mong gamitin ang link ng click-me class na tinukoy sa code sa itaas. Upang magawa ito, ipasok ang sumusunod na code sa katawan ng dokumento:

Mag-click upang ipakita ang popup

Inirerekumendang: