Cách thay đổi style (giao diện) alert box bằng JavaScript

Không thể style alert() mặc định. Phải tạo custom alert box hoàn toàn bằng HTML/CSS/JS.

Ví dụ Custom Alert hoàn chỉnh (Vanilla JS)

<!DOCTYPE html>
<html>
<head>
<style>
.alert-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:1000; backdrop-filter:blur(2px); }
.alert-box { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:#514E61; color:#fff; padding:24px; border-radius:12px; width:90%; max-width:360px;
    box-shadow:0 10px 40px rgba(0,0,0,0.3); text-align:center; font-family:system-ui, sans-serif; }
.alert-message { margin-bottom:20px; line-height:1.6; }
.alert-btn { background:#48E5DA; color:#000; border:none; border-radius:8px; padding:10px 28px;
    font-size:1rem; font-weight:600; cursor:pointer; transition:background .2s; }
.alert-btn:hover { background:#35d0c3; }
</style>
</head>
<body>
    <button onclick="showAlert('Đây là custom alert đẹp, responsive, accessible!')">Mở Alert
    <div class="alert-overlay" id="alertOverlay">
        <div class="alert-box">
            <div class="alert-message" id="alertMsg"></div>
            <button class="alert-btn" onclick="hideAlert()">OK</button>
        </div>
    </div>
    <script>
        function showAlert(msg) {
            document.getElementById('alertMsg').textContent = msg;
            document.getElementById('alertOverlay').style.display = 'block';
            document.getElementById('alertOverlay').focus(); // accessibility
        }
        function hideAlert() {
            document.getElementById('alertOverlay').style.display = 'none';
        }
        // Click overlay để đóng
        document.getElementById('alertOverlay').addEventListener('click', e => {
            if (e.target.id === 'alertOverlay') hideAlert();
        });
        // ESC để đóng
        document.addEventListener('keydown', e => {
            if (e.key === 'Escape') hideAlert();
        });
    </script>
</body>
</html>

Ưu điểm: Tùy chỉnh mọi thứ (màu, font, animation, vị trí), accessible (focus, ESC), responsive, không phụ thuộc thư viện.