Cửa sổ bật lên cho nhiều mục đích khác nhau có nhiều công dụng trong việc xây dựng web. Chúng có thể được sử dụng để tạo các loại menu khác nhau, đặt văn bản quảng cáo và đồ họa, chú giải công cụ khi điền vào các biểu mẫu phức tạp và thuận tiện khi tự đặt biểu mẫu trong các cửa sổ không chiếm dung lượng trên trang. Trong bài viết của chúng tôi, bạn sẽ tìm thấy mô tả về cách bạn có thể tạo một cửa sổ như vậy.
Nó là cần thiết
Kiến thức cơ bản về HTML
Hướng dẫn
Bước 1
cửa sổ bật lên, html, lớp ẩn
Bước 2
Trên nhiều trang trên web, bạn có thể thấy các thư viện ưa thích của nhiều khung JavaScript khác nhau (jQuery, MooTools, Prototype, v.v.) được sử dụng để tạo cửa sổ bật lên trong các trang. Tuy nhiên, trên thực tế, chúng không cần thiết khi giải quyết vấn đề cụ thể này. Các công cụ có sẵn trong Ngôn ngữ đánh dấu siêu văn bản (HTML) và Trang tính kiểu xếp tầng (CSS) là đủ để tạo cửa sổ bật lên. Các cửa sổ được tạo theo cách này sẽ hoạt động bất kể JavaScript có được bật trong trình duyệt của khách truy cập hay không.
Tất cả mã tạo cửa sổ bật lên có thể được đặt trên hai dòng. Dòng đầu tiên tạo một liên kết phải được nhấp vào để hiển thị cửa sổ bật lên:
Bấm vào đây!
Ở đây, thuộc tính onmouseover của thẻ liên kết đặt loại con trỏ chuột mặc định cho các liên kết. Thuộc tính onclick chỉ định rằng khi liên kết được nhấp vào, khối PopUp ẩn sẽ hiển thị.
Trên thực tế, dòng thứ hai là cửa sổ bật lên. Lớp với mã nhận dạng PopUp và kích thước của cửa sổ, màu sắc và kích thước của văn bản, nền và đường viền được chỉ định trong thuộc tính style:
Đây là văn bản trong cửa sổ bật lên
Nó không hiển thị theo mặc định - điều này được chỉ ra bởi bộ chọn hiển thị với giá trị không có trong mô tả kiểu lớp.
Trên thực tế, đây là tất cả những gì bạn cần để tạo một cửa sổ bật lên - đặt hai dòng này giữa các thẻ và trang của bạn và nó đã sẵn sàng hoạt động.
Bước 3
Để có thể đóng cửa sổ bật lên phía trước thẻ, bạn cần thêm liên kết thực hiện hành động ngược lại - ẩn lớp hiển thị bằng mã nhận dạng PopUp:
đóng
Bước 4
Và nếu bạn muốn cửa sổ bật lên không phải bằng cách nhấp mà bằng cách di con trỏ chuột, thì dòng đầu tiên có liên kết phải được sửa đổi theo cách này:
di chuyển chuột qua đây!
Bước 5
Bây giờ bạn đã quen với nguyên tắc và cấu trúc của mã cửa sổ bật lên, và việc thiết kế hình thức và nội dung của nó hoàn toàn phụ thuộc vào mục tiêu và trí tưởng tượng của bạn.
