Cách Tạo Cửa Sổ Bật Lên Trong HTML

Mục lục:

Cách Tạo Cửa Sổ Bật Lên Trong HTML
Cách Tạo Cửa Sổ Bật Lên Trong HTML

Video: Cách Tạo Cửa Sổ Bật Lên Trong HTML

Video: Cách Tạo Cửa Sổ Bật Lên Trong HTML
Video: Hướng dẫn Tạo MENU website với Html Css nhanh chóng - Học html css | Unitop.vn 2024, Có thể
Anonim

Việc tạo cửa sổ bật lên trong HTML được thực hiện bằng cách sử dụng thư viện jQuery, cho phép bạn tích hợp trình xử lý sự kiện vào một trang web và do đó có thể hiển thị nội dung đang hoạt động của trang web.

Cách tạo cửa sổ bật lên trong HTML
Cách tạo cửa sổ bật lên trong HTML

Hướng dẫn

Bước 1

Mở trang trang HTML của bạn trong trình soạn thảo văn bản mà bạn sử dụng để viết mã bạn muốn. Bạn cũng có thể sử dụng tiện ích Windows Notepad tiêu chuẩn để chèn cửa sổ bật lên. Để thực hiện việc này, hãy nhấp chuột phải vào tệp HTML và chọn "Open With" - "Notepad".

Bước 2

Trong phần tài liệu, hãy tạo một lớp sẽ xử lý jQuery:

Bước 3

Sau đó, bạn cần đặt tên của cửa sổ bật lên. Để làm điều này, bạn có thể sử dụng các tiêu đề HTML theo tầng:

Tiêu đề cửa sổ

Bước 4

Sau đó, đặt văn bản sẽ được hiển thị trong cửa sổ bằng cách sử dụng tập lệnh để tạo một đoạn văn:

Chữ

Bước 5

Sau đó, tạo một lớp với lớp close_win để đóng cửa sổ bật lên, trước khi đóng phần xử lý trước đó:

Đóng cửa sổ

Bước 6

Bao gồm thư viện jQuery trong tệp bằng cách thêm thẻ bắt buộc giữa các bộ mô tả tài liệu. Ví dụ:

Bước 7

Sau đó, nhập mã để hiển thị cửa sổ bật lên:

$ (function () {

$ ('# Hiển thị'). Hide ();

Bước 8

Tiếp theo, bạn cần xử lý trường hợp người dùng nhấn nút chuột để gọi cửa sổ bật lên và xử lý việc đóng cửa sổ. Để thực hiện việc này, hãy nhập mã sau:

$ (‘# Click-me’). Nhấp vào (function () {$ (‘# show’). Fadein (300);})

$ (‘# Close_win’). Nhấp vào (function () {$ (‘# show’). FadeOut (300);})

& lt / script>})

Chương trình này xử lý người dùng nhấn các nút để gọi cửa sổ bật lên và nhấp vào liên kết để đóng nó.

Bước 9

Để hiển thị cửa sổ bật lên trên trang, bạn có thể sử dụng liên kết của lớp click-me đã được chỉ định trong đoạn mã trên. Để thực hiện việc này, hãy nhập mã sau vào phần nội dung của tài liệu:

Nhấp để hiển thị cửa sổ bật lên

Đề xuất: