Bạn có thể tùy chỉnh JavaScript cảnh báo không?

Các phương thức nhắc nhở, xác nhận và cảnh báo JavaScript hiển thị các hộp thoại bật lên và lấy tiêu điểm ra khỏi trang và buộc người dùng phải đọc thông báo

Bạn chỉ nên sử dụng những hộp thoại này khi thực sự cần thiết. Quá nhiều cảnh báo và người dùng sẽ khó chịu

Các trình duyệt cũng đã bắt đầu cung cấp cho người dùng khả năng chặn các lời nhắc bổ sung. Họ làm điều này vì có quá nhiều trang web spam lạm dụng các tùy chọn hộp thoại gốc này vì chúng chặn tất cả các tương tác, bao gồm cả điều hướng

Mặc dù các hộp thoại gốc có thể là một công cụ phù hợp, nhưng bạn không bị giới hạn ở các tùy chọn gốc, bạn cũng có thể tạo cửa sổ bật lên thông tin và cảnh báo của riêng mình bằng cách sử dụng CSS và một số JavaScript đơn giản

Khi nào nên sử dụng cảnh báo và cửa sổ bật lên cảnh báo

Cảnh báo JavaScript là lý tưởng cho các tình huống sau

• Nếu bạn muốn hoàn toàn chắc chắn rằng họ nhìn thấy một thông báo trước khi làm bất cứ điều gì trên trang web
• Bạn muốn cảnh báo người dùng về điều gì đó
• Thông báo cho người dùng về một bản cập nhật
• Đã xảy ra lỗi và bạn muốn thông báo cho người dùng về sự cố
• Khi yêu cầu người dùng xác nhận một số hành động

Ngoài ra còn có hai cách bạn có thể cung cấp trong ứng dụng nhắn tin cho người dùng, dưới dạng hộp thoại hoặc dưới dạng lớp phủ biểu ngữ. Bạn cũng có thể hiển thị một thông báo nội tuyến, nhưng tôi nghĩ điều đó liên quan nhiều hơn đến việc xác thực biểu mẫu và các hướng dẫn mà tôi sẽ trình bày trong một bài viết riêng

Sử dụng Chức năng hộp thoại cảnh báo, nhắc nhở và thông tin JavaScript

Các hộp thoại cảnh báo, xác nhận và nhắc JavaScript gốc khá dễ sử dụng

Phương thức cảnh báo có một tham số duy nhất, thông báo, được hiển thị ở giữa hộp thoại

 alert("This is an Alert Dialog"); 

Hộp thoại cảnh báo rất tốt khi bạn chỉ cần truyền đạt điều gì đó quan trọng cho người dùng. Nhưng nếu bạn cần thu thập câu trả lời đúng/sai, bạn cần sử dụng hộp thoại xác nhận

 confirm("This is an Confirm Dialog"); 

Nó cũng có một tham số duy nhất là một chuỗi chứa thông báo hoặc câu hỏi mà bạn cần hỏi người dùng. Không giống như phương thức cảnh báo, phương thức xác nhận trả về đúng hoặc sai dựa trên phản hồi của người dùng

Hộp thoại nhắc gốc cuối cùng mà bạn có thể hiển thị là hộp thoại đầu vào. Đây là nơi bạn có thể đặt câu hỏi hoặc chỉ nêu điều gì đó mà bạn cần phản hồi thực tế từ người dùng

 prompt("This is an Prompt Dialog", "Please Provide a Response..."); 

Điều này hoạt động tương tự như hộp thoại xác nhận, ngoại trừ nó thu thập một văn bản đầu vào từ người dùng. Nó cũng có một tham số thứ hai tùy chọn, nơi bạn có thể cung cấp một giá trị mặc định hoặc tương đương với văn bản giữ chỗ

Các chức năng gốc này đã tồn tại mãi mãi và khiến việc nhắc người dùng nhập liệu hoặc chỉ truyền tải một thông điệp trở nên đơn giản. Về bản chất, chúng cũng ngăn người dùng làm bất cứ điều gì khác với trình duyệt, điều này thực sự khiến tôi thất vọng hơn tôi muốn

Điều tiêu cực cuối cùng đối với các hộp thoại cảnh báo JavaScript gốc này là chúng không thể được tạo kiểu hoặc tùy chỉnh. Tôi đã cố ý chèn ảnh chụp màn hình từ Chrome, Edge và FireFox để cho biết mỗi trình duyệt hiển thị các hộp thoại này khác nhau như thế nào

Nếu bạn cần cung cấp giao diện nhất quán trong ứng dụng của mình, bạn sẽ cần cung cấp các lựa chọn thay thế hộp thoại cảnh báo của riêng mình bằng cách sử dụng HTML, CSS và một chút JavaScript

Tạo Cảnh báo, Lời nhắc và Hộp thoại Thông tin Tùy chỉnh bằng JavaScript và CSS

Thực sự có hàng trăm plugin và tiện ích mở rộng khung có sẵn để giúp bạn hiển thị thông báo thông tin cho người dùng. Bootstrap có một loạt các thành phần phụ thuộc vào jQuery cứng có thể đóng vai trò là một mô hình tốt

Tuy nhiên, tôi sẽ chứng minh cách bạn có thể đạt được điều tương tự mà không cần thêm 150kb JavaScript để các trang của bạn tải nhanh hơn và dễ bảo trì hơn nhiều

Một lần nữa, lợi thế chính của việc sử dụng cơ chế cảnh báo tùy chỉnh là bạn có thể tùy chỉnh trải nghiệm để nhất quán với thẩm mỹ ứng dụng và thương hiệu của mình. Bạn sẽ mất khả năng chặn hoàn toàn tất cả các hành động khác của trình duyệt, điều mà tôi không coi là điều xấu

Có hai cách phổ biến để hiển thị thông báo cho người dùng, dưới dạng biểu ngữ, thường được hiển thị dọc theo một trong các cạnh cửa sổ hoặc dưới dạng hộp thoại phương thức. Tôi sẽ bắt đầu với việc hiển thị một biểu ngữ đơn giản có nút đóng trước

Biểu ngữ thông điệp đơn giản

Kỹ thuật này liên quan đến sự kết hợp của HTML tùy chỉnh, CSS và một chút JavaScript trung gian. Đầu tiên đánh dấu

Thay vì giữ đánh dấu trong cây DOM chính, tôi thích sử dụng mẫu đánh dấu bằng thủ thuật trường học cũ bằng cách sử dụng thẻ script. Thay vì thẻ script là một phần tử JavaScript, loại của phần tử được đặt thành một thứ khác với 'ứng dụng/javascript' truyền thống

Đối với một mẫu chung như tôi đang trình bày ở đây, tôi sử dụng x-template. Điều này ngăn trình duyệt cố phân tích nội dung của phần tử dưới dạng tập lệnh. Trên thực tế, nó chỉ bỏ qua việc phân tích cú pháp tất cả các phần tử cùng nhau. Nhưng bạn vẫn có thể chọn phần tử nên mình quảng cáo luôn thuộc tính id, banner-template ở đây mình dùng để chọn nội dung

Biểu ngữ cần được áp dụng kiểu chấp nhận được. Để mọi thứ đơn giản, tôi đã chọn sử dụng thành phần Bootstrap làm tài liệu tham khảo vì nó rất đơn giản. Bạn có thể điều chỉnh các kiểu để đáp ứng yêu cầu của bạn

 .banner { position: absolute; z-index: 9999; padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem; display: none; } .banner.active { display: block; } .banner-bottom { left: 0; right: 0; bottom: 10px; } .banner-top { left: 0; right: 0; top: 10px; } .banner-right { right: 10px; bottom: 10%; min-height: 10vh; } .banner-left { left: 10px; bottom: 10%; min-height: 10vh; } .alert-primary { color: #004085; background-color: #cce5ff; border-color: #b8daff; } .banner-close { position: absolute; right: 1.5%; } .banner-close:after { position: absolute; right: 0; top: 50%; content: 'X'; color: #69f; } 

Trong phần trình diễn này, tôi đang hiển thị biểu ngữ ở đầu cửa sổ. Nhưng tôi đã bao gồm các quy tắc để định vị nó ở dưới cùng và sắp xếp ở dưới cùng dọc theo mỗi bên mà bạn cũng có thể sử dụng

Trong trường hợp này, biểu ngữ có nền màu xanh da trời với phông chữ màu xanh đậm. Nút đóng là một khoảng, được đặt hoàn toàn ở phía bên tay phải của biểu ngữ

Tôi đã sử dụng phần tử nút đóng. sau phần tử giả để áp dụng 'X'. Bạn có thể sử dụng thuộc tính nội dung phần tử giả để sử dụng bất kỳ ký tự hoặc hình tượng phông chữ tùy chỉnh nào bạn muốn

Tôi đã thêm chỉ mục z là 9999 để làm cho biểu ngữ phủ lên bất kỳ thứ gì trên màn hình, nhưng phương thức chèn DOM mà tôi sử dụng sẽ biến nó thành phần tử cuối cùng trong cây DOM. Điều này cũng sẽ làm cho nó phủ lên tất cả các yếu tố khác

Bạn không cần phải phủ nội dung của mình, bạn cũng có thể muốn khiến nó đẩy nội dung xuống, v.v. Điều này chỉ cần thêm một chút CSS để ảnh hưởng đến bố cục của bạn

Bạn cũng có thể muốn thêm một số hiệu ứng chuyển tiếp đơn giản để làm cho biểu ngữ mờ dần trong và ngoài cũng như trượt vào chế độ xem. Một lần nữa, ví dụ này chỉ nên là cơ sở đơn giản để bạn bắt đầu hành trình tùy chỉnh của mình

Tiếp theo, tôi thêm JavaScript để liên kết gọi lại với nút cảnh báo, được sử dụng làm phương tiện để kích hoạt biểu ngữ cảnh báo

 var simpleAlert = document.querySelector(".simple-alert"); simpleAlert.addEventListener("click", function (e) { e.preventDefault(); injectTemplate(getBannerTemplate()); var btnClose = document.querySelector(".banner-close"); btnClose.addEventListener("click", function (closeEvt) { var banner = document.querySelector(".banner"); banner.parentNode.removeChild(banner); }); }); 

Một lần nữa, sự kiện nhấp chuột được sử dụng để bắt đầu thói quen cảnh báo tùy chỉnh. Lần này, một số phương thức của trình trợ giúp được sử dụng để lấy mẫu biểu ngữ và đưa nó vào DOM

Kỹ thuật này dựa trên phương thức chèn createDocumentFragment mà tôi đã mô tả trong bài viết trước

Sau khi biểu ngữ được chèn vào tài liệu, bạn cần liên kết trình xử lý sự kiện cho phần tử đóng, được biểu thị bằng dấu 'x' ở phía bên tay phải của biểu ngữ

Kỹ thuật chèn mẫu động hoạt động tuyệt vời để tránh các quy trình phức tạp nhằm theo dõi các ràng buộc sự kiện, v.v. Mỗi lần nó được chèn vào, bạn sẽ có một bảng xếp hạng rõ ràng và có thể tránh rò rỉ bộ nhớ không mong muốn, v.v.

Khi nhấp vào nút đóng, nó sẽ phá hủy biểu ngữ bằng cách xóa nó khỏi DOM

Tôi sẽ thêm một bài viết khác để mở rộng chủ đề này sang các hộp thoại phương thức tùy chỉnh trong tương lai gần, vì vậy hãy theo dõi Twitter của tôi để biết khi nào điều đó được thêm vào

Bản tóm tắt

Có nhiều tùy chọn để làm gián đoạn người dùng bằng các thông báo quan trọng về quy trình ứng dụng. Có các hộp thoại cảnh báo riêng mà bạn có thể nhắc bằng JavaScript hoặc tự tạo hộp thoại của riêng mình bằng CSS và HTML. Chỉ cần đảm bảo rằng bạn không lạm dụng quyền hiển thị thông báo cho người dùng

Chúng tôi có thể tùy chỉnh hộp cảnh báo không?

Chúng tôi có thể thay đổi màu của hộp cảnh báo trong JavaScript không?

Làm cách nào để tùy chỉnh hộp cảnh báo bằng CSS?

Làm cách nào để thay đổi màu nền của hộp cảnh báo trong JavaScript?