Video: Tạo hộp thoại đẹp sử dụng SweetAlert 2025
AJAX cho phép các lập trình viên HTML5 và CSS3 tạo các hộp thoại tùy chỉnh. JavaScript cung cấp một vài hộp thoại (hộp thoại nhắc nhở và nhắc nhở), nhưng chúng khá xấu và tương đối không linh hoạt. Giao diện jQuery bao gồm một kỹ thuật để biến bất kỳ div nào thành một hộp thoại ảo. Hộp thoại theo chủ đề và có thể thay đổi kích cỡ và di chuyển được.
Việc xây dựng hộp thoại không phải là vấn đề khó khăn, nhưng bạn cần phải bật và tắt nó bằng mã, hoặc nó sẽ không hoạt động như một hộp thoại thích hợp (bắt chước một cửa sổ trong quá trình hoạt động hệ thống):
-
Tạo div mà bạn định sử dụng làm hộp thoại.
Tạo một div và cho nó một ID để bạn có thể biến nó thành một nút hộp thoại. Thêm thuộc tính title, và tiêu đề xuất hiện trong thanh tiêu đề của hộp thoại.
Hộp thoại cho phép bạn có một hộp thoại di động và khả năng tùy chỉnh phù hợp với chủ đề trang đã cài đặt.
-
Bật div vào hộp thoại.
Sử dụng phương pháp thoại () để biến div thành một hộp thoại jQuery trong hàm init ():
$ ("# dialog"). hộp thoại (); -
Ẩn hộp thoại theo mặc định.
Đóng hộp thoại.
-
Để đóng một hộp thoại, tham khảo nút hộp thoại và gọi phương thức () trên nó một lần nữa. Lần này, gửi một giá trị "close" sang một tham số và hộp thoại sẽ đóng ngay:
// lúc đầu đóng hộp thoại $ ("hộp thoại #"). hộp thoại ("đóng");
Nhấp vào X sẽ tự động đóng hộp thoại.
-
Hộp thoại có một X nhỏ giống như biểu tượng Đóng cửa sổ trên hầu hết các hệ thống cửa sổ. Người dùng có thể đóng hộp thoại bằng cách nhấp vào biểu tượng này.
Bạn có thể mở và đóng hộp thoại với mã.
-
Các hộp thoại Mở hộp thoại và đóng các hộp thoại của tôi gọi các hàm kiểm soát hoạt động của hộp thoại. Ví dụ, đây là chức năng gắn liền với nút Mở Dialog:
chức năng openDialog () {$ ("# hộp thoại"). hộp thoại ("mở");} / / end openDialog
