Mục lục:
Video: Hướng dẫn thủ thuật kiếm việc cho Freelancer để kiếm tiền online | Năng Lực Thâu Tóm Tiền Bạc Phần 5 2025
Cả HTML5 và JavaScript đều có thể hiển thị các hộp thoại trong CSS3. Ví dụ, bạn có thể thấy một kết hợp của một hộp thoại HTML5 / CSS3 mà không yêu cầu sử dụng JavaScript tại Code Project.
Thêm JavaScript có nghĩa là bạn có thể truy cập nhanh các chức năng alert (), confirm () và prompt () cho màn hình hộp thoại trực tiếp hạn chế. Bạn cũng có tất cả các chức năng mà JavaScript có thể cung cấp để tạo các hộp thoại tùy chỉnh thật tuyệt vời.
Vấn đề với tất cả các phương pháp này là bạn có thể cần phải viết một số lượng đáng kể mã để có được kết quả mong muốn. Mặt khác, sử dụng jQuery UI cho phép tạo các kiểu hộp thoại mà không cần mã hóa nhiều:
-
Modal
-
Hoạt hình
-
Modal
-
Modal có xác nhận
-
Modal form
-
Modal tin nhắn
Ngoài ra, ngay cả một hộp thoại jQuery cơ bản cung cấp chức năng tốt hơn chức năng cảnh báo JavaScript (). Bạn có thể di chuyển hộp thoại xung quanh, thay đổi kích thước và đóng nó bằng cách sử dụng X ở góc trên bên phải. Văn bản cũng có thể được trang trí bằng nhiều cách khác nhau bởi vì nó sử dụng đầu vào chuẩn HTML.
Ví dụ sau bắt đầu bằng cách tạo ra một phong cách nội bộ để sử dụng để trang trí văn bản. (Bạn có thể tìm thấy mã hoàn chỉnh cho ví dụ này trong thư mục Chương 06Widgets của mã có thể tải xuống dưới dạng DialogBox.)
. Bình thường {font-family: Arial, Helvetica, sans-serif; màu sắc: SaddleBrown; màu nền: Bisque;}. Nhấn mạnh {color: Maroon; kiểu chữ: italic; font-size: larger;}
Mã này cung cấp một vài thay đổi đơn giản cho văn bản - chỉ cần đủ để bạn có thể thấy CSS tuỳ chỉnh trong công việc. Đoạn mã sau tạo ra hộp thoại trên màn hình tự động khi bạn tải trang.
Tạo một hộp thoại đơn giản
Đây là một số văn bản thú vị cho hộp thoại!
$ ("# DialogContent"). hộp thoại ();
Hộp thoại yêu cầu hai phần tử - một vùng chứa, chẳng hạn như a, để giữ phụ đề trong thuộc tính tiêu đề và một phần tử văn bản, chẳng hạn như
để giữ nội dung. Lưu ý rằng văn bản đoạn văn bao gồm trong trường hợp này để làm nổi bật từ hấp dẫn. Bạn có thể định dạng nội dung theo bất kỳ cách nào mà không cần thay đổi cuộc gọi đến jQuery UI.
Kịch bản sử dụng một bộ chọn id để truy cập. Sau đó nó thực hiện một cuộc gọi đơn giản đến hộp thoại () để hiển thị hộp thoại trên màn hình. Lưu ý rằng nó cung cấp sự xuất hiện dễ chịu và nó chứa nội dung được định dạng, không giống như chức năng alert () cung cấp một hộp thoại hình vuông khắc nghiệt, thiếu bất kỳ định dạng nào.
