Trong tệp javascript, tôi sẽ nhắm mục tiêu biểu mẫu đăng ký và thêm trình xử lý sự kiện onsubmit. Vì vậy, mỗi khi chúng tôi nhấp vào nút gửi, một chức năng sẽ chạy. Tôi sẽ chuyển vào hàm dưới dạng đối số sự kiện, vì tôi cần phương thức preventDefault[] để dừng biểu mẫu gửi dữ liệu đến máy chủ nếu xảy ra lỗi
Và đó là nó. Tất cả mã bạn cần để tùy chỉnh thông báo lỗi cho phần tử biểu mẫu mặc định. Để thử nghiệm với kết quả cuối cùng và sao chép và dán vào nội dung yêu thích của bạn [mà không sợ làm hỏng bất kỳ thứ gì], hãy chuyển sang Codepen bằng cách chọn bất kỳ liên kết hướng dẫn nào bên dướiThông báo cảnh báo có thể được sử dụng để thông báo cho người dùng về điều gì đó đặc biệt. nguy hiểm, thành công, thông tin hoặc cảnh báo
× nguy hiểm. Biểu thị một hành động nguy hiểm hoặc có khả năng tiêu cực
× Thành công. Biểu thị một hành động thành công hoặc tích cực
× Thông tin. Biểu thị một thay đổi hoặc hành động mang tính thông tin trung lập
× Cảnh báo. Cho biết một cảnh báo có thể cần chú ý
Tự mình thử »
Tạo một thông báo cảnh báo
Bước 1] Thêm HTMLThí dụ
×
Đây là một hộp cảnh báo
Nếu bạn muốn khả năng đóng thông báo cảnh báo, hãy thêm phần tử có thuộc tính title
có nội dung "khi bạn nhấp vào tôi, hãy ẩn phần tử gốc của tôi" - đó là
[lớp="cảnh báo"]
Mẹo. Sử dụng thực thể HTML "×
" để tạo chữ "x"
Tạo kiểu cho hộp cảnh báo và nút đóng
Thí dụ
/* Hộp thông báo cảnh báo */
báo động {
đệm. 20px;
màu nền. #f44336;
màu. trắng;
lề dưới. 15px;
}
/* Nút đóng */
closebtn {
lề trái. 15px;
màu. trắng;
trọng lượng phông chữ. Dũng cảm;
trôi nổi. đúng;
cỡ chữ. 22px;
chiều cao giữa các dòng. 20px;
con trỏ. con trỏ;
chuyển tiếp. 0. 3s;
}
/* Khi di chuyển chuột qua nút đóng */
closebtn. bay lượn {
màu. màu đen;
}
Nhiều cảnh báo
Nếu bạn có nhiều thông báo cảnh báo trên một trang, bạn có thể thêm tập lệnh sau để đóng các cảnh báo khác nhau mà không cần sử dụng thuộc tính title trên mỗi phần tử .
Và, nếu bạn muốn các cảnh báo mờ dần khi bạn nhấp vào chúng, hãy thêm opacity
và transition
vào lớp alert
Hộp thông báo là một trong những thành phần thông tin trên trang web. Nó hiển thị trên các sự kiện khác nhau như thành công hay thất bại của một quy trình. Những thông điệp này thực sự quan trọng đối với thiết kế web tương tác. Trong hướng dẫn này, chúng ta sẽ định kiểu một thông báo lỗi bằng mã CSS ví dụ
Tại đây, bạn sẽ không chỉ tìm thấy thông báo lỗi mà còn có thông tin, cảnh báo và thiết kế hộp thông báo thành công. Do kiểu CSS khá giống nhau đối với các loại tin nhắn này ngoại trừ những thay đổi nhỏ về màu sắc và biểu tượng. Bạn có thể kiểm tra đầu ra cuối cùng trên trang demo
Khái niệm mã hóa dành cho loại hộp thông báo này rõ ràng và dễ dàng. Bạn chỉ cần bọc văn bản tin nhắn của mình chỉ trong một thẻ div với một tên lớp cụ thể. Sau đó, chúng tôi sẽ tạo kiểu cho các hộp thông báo này bằng CSS
Cấu trúc HTML
HTML đơn giản như một dòng mã. Bạn chỉ cần bọc “thông báo lỗi” của mình trong thẻ div với tên lớp là "error"
. Bạn có thể thêm bất kỳ yếu tố nào khác bên trong thẻ này. Do đó, một HTML cơ bản cho thông báo lỗi như sau
Error message
Ngoài ra, bạn cũng có thể tạo các hộp thông báo về thông tin, thành công, cảnh báo và xác thực bằng cùng một phương pháp đã đề cập ở trên. Chỉ cần thêm một tên lớp có liên quan vào tin nhắn của bạn mà chúng tôi sẽ tạo kiểu trong CSS
Info messageSuccessful operation messageWarning messageValidation message 1
Validation message 2
Bạn không bị giới hạn chỉ thêm văn bản thuần túy bên trong phần tử hộp thông báo của mình. Bạn cũng có thể thêm bất kỳ thành phần HTML nào như hình ảnh, nút, liên kết hoặc video HTML5. Tuy nhiên, bạn sẽ cần tạo kiểu cho các phần tử này bằng CSS bổ sung
Kiểu CSS cho thông báo lỗi
Trước hết, xác định CSS chung cho tất cả các loại tin nhắn. Nếu bạn chỉ cần một kiểu thông báo lỗi, thì chỉ cần xóa bộ chọn lớp khác khỏi mã bên dưới
.info, .success, .warning, .error, .validation { border: 1px solid; margin: 10px auto; padding: 15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center; max-width: 460px; }
Sau đó, tạo kiểu cho thông báo lỗi bằng cách nhắm mục tiêu lớp "error"
. Xác định màu [cho văn bản], màu nền và đặt biểu tượng lỗi bằng thuộc tính hình nền CSS
.error { color: #D8000C; background-color: #FFBABA; background-image: url['//i.imgur.com/GnyDvKN.png']; }
Bạn cũng có thể thêm biểu tượng Font Awesome nếu không muốn thêm biểu tượng hình ảnh. Để làm như vậy, hãy đưa thư viện Font Awesome CSS vào dự án của bạn và thêm biểu tượng cụ thể bằng cách nhắm mục tiêu “. lỗi. before” bộ chọn giả. Sau đây là một ví dụ về việc sử dụng biểu tượng Font Awesome
.error:before{ font-family: FontAwesome; content: '\f057'; font-size: 24px; color: #D8000C; }
Tương tự, tạo kiểu CSS cho thông báo xác thực như sau
.validation { color: #D63301; background-color: #FFCCBA; background-image: url['//i.imgur.com/GnyDvKN.png']; }
Bạn cũng có thể cần tạo kiểu cho hộp “thông báo cảnh báo” để thu hút sự chú ý của người dùng
.warning { color: #9F6000; background-color: #FEEFB3; background-image: url['//i.imgur.com/Z8q7ww7.png']; }
Tương tự như vậy, tạo kiểu CSS cho thông tin và thông báo thành công được mô tả như sau
.info { color: #00529B; background-color: #BDE5F8; background-image: url['//i.imgur.com/ilgqWuX.png']; } .success { color: #4F8A10; background-color: #DFF2BF; background-image: url['//i.imgur.com/Q9BGTuy.png']; }
Đó là tất cả. Tôi hy vọng bạn thấy hướng dẫn này hữu ích để tạo thông báo lỗi và triển khai thành công ví dụ về kiểu CSS này. Nếu bạn cần thêm bất kỳ trợ giúp nào liên quan đến kiểu dáng CSS, hãy cho tôi biết bằng cách nhận xét bên dưới