Hộp thông báo là gì?
Hộp thông báo là một cửa sổ nhỏ bật lên như một phản hồi đối với một số loại tương tác của người dùng (nhấp, cuộn, nhập, v.v.). Hộp cảnh báo chủ yếu được sử dụng để cảnh báo người dùng về sự cố, nhưng chúng cũng chỉ được sử dụng để thông báo cho người dùng cuối.
Một ví dụ phổ biến về việc sử dụng hộp cảnh báo là nếu người dùng nhấp vào nút gửi biểu mẫu, nhưng họ quên điền vào trường bắt buộc. Sau đó, hộp cảnh báo sẽ bật lên với thông báo giải thích sự cố cho người dùng:
Cách tạo Hộp thông báo
Hãy tái tạo hộp cảnh báo chính xác từ ảnh chụp màn hình ở trên.
Đầu tiên, hãy thêm phần tử nút tạo để sử dụng làm trình kích hoạt:
<button onclick="missingFieldWarningPopup()">Submit form</button>
Bây giờ hãy thêm hàm JavaScript này vào .js của bạn tệp:
function missingFieldWarningPopup() {
alert("You forgot to fill out all the required input fields!")
}
Điều gì xảy ra trong mã: phần tử nút có onclick thuộc tính như một trình kích hoạt sự kiện nhấp chuột. Khi người dùng nhấp vào nút, sự kiện nhấp chuột gọi missingFieldWarningPopup() chức năng này sẽ bật lên alert() cửa sổ nhắc nhở và hiển thị chuỗi (văn bản) bên trong.
Nếu bạn muốn thêm hàm JavaScript dưới dạng nội dòng, , sau đó thêm mã này vào bên trong <head> phần tử của tài liệu HTML của bạn:
<script type="text/javascript">
function missingFieldWarningPopup() {
alert("You forgot to fill out all the required input fields!")
}
</script>Mã mẫu.