JavaScript hỗ trợ ba loại hộp thoại quan trọng. Chúng có thể dùng để cảnh báo, xác nhận hoặc nhận đầu vào từ người dùng. Chúng ta sẽ thảo luận từng loại một.
Dưới đây là mã triển khai các hộp thoại JavaScript:
Ví dụ
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .sample { font-size: 18px; font-weight: 500; } </style> </head> <body> <h1>Các hộp thoại</h1> <div class="sample"></div> <button class="alert">HỘP THOẠI CẢNH BÁO</button> <button class="confirm">HỘP THOẠI XÁC NHẬN</button> <button class="prompt">HỘP THOẠI NHẬP LIỆU</button> <h3> Nhấn các nút trên để xem hộp thoại tương ứng </h3> <script> let fillEle = document.querySelector(".sample"); document.querySelector('.alert').addEventListener('click',()=>{ alert('Xin chào thế giới'); }); document.querySelector('.confirm').addEventListener('click',()=>{ confirm('Bạn có chắc chắn?'); }); document.querySelector('.prompt').addEventListener('click',()=>{ prompt('Nhập tên của bạn'); }) </script> </body> </html>
Kết quả
Khi nhấn nút "HỘP THOẠI CẢNH BÁO":
Khi nhấn nút "HỘP THOẠI XÁC NHẬN":
Khi nhấn nút "HỘP THOẠI NHẬP LIỆU":
