Popup alert trong javascript | tạo popup alert bằng html css js

0
3
This entry is part 35 of 35 in the series Tự học lập trình Javascript

Popup alert là gì thì chúng ta đã biết rồi phải không :D. Nếu bạn nào lỡ quên thì mình nhắc nhẹ nó là hộp thông báo từ trình duyêt. Nó có các phương thức alert(), prompt() , confirm ấy, ở bài viết này thì mình sẽ đi sâu về thằng này một tí. Ngoài ra thì mình sẽ tự khởi tạo popup alert bởi vì cái hộp mặc định của trình duyệt nhìn rất chuối 😀

popup alert

Popup alert

alert()

phương thức này bỏ qua nha mình đã nói về nó rồi mà, mà nó cũng không có gì thú vị 😀

confirm() 

Hộp xác nhận thường được sử dụng nếu bạn muốn người dùng xác minh hoặc chấp nhận điều gì đó. Khi hộp xác nhận bật lên, người dùng sẽ phải nhấp vào “OK” hoặc “No” để tiếp tục. Nếu người dùng nhấp vào “OK”, hộp sẽ trả về true . Nếu người dùng nhấp vào “Hủy”, hộp sẽ trả về false .

Chúng ta cùng làm một ví dụ để hiểu hơn về nó.

Khá thú vị :D, trong ví dụ trên chỉ khi người dùng chọn Yes thì hộp xác nhận mới biến mất.

prompt()

Hộp prompt thường được sử dụng nếu bạn muốn người dùng nhập giá trị trước khi vào trang. Khi hộp nhắc bật lên, người dùng sẽ phải nhấp vào “OK” hoặc “Hủy” để tiếp tục sau khi nhập giá trị đầu vào. Nếu người dùng nhấp vào “OK”, hộp trả về giá trị đầu vào. Nếu người dùng nhấp vào “No”, hộp sẽ trả về giá trị rỗng.

Ở ví dụ trên thì bắt buộc bạn phải nhập giá trị cho hộp prompt.

Tạo popup alert bằng html css js

Bây giờ thì mình sẽ tự khởi tạo popup alert.

Code html:

Code css:

Code js:

Oke rồi đấy, các bạn nên sử dụng form để làm popup alert. À mà bắt buộc rồi :D, đây là mình demo thôi. Mình xin kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây.

Series Navigation<< Phương thức setTimeout và setInterval trong javascript

ĐỂ LẠI BÌNH LUẬN

Vui lòng nhập nội dung bình luận
Vui lòng nhập tên