Cách thay thế alert mặc định bằng custom alert box đẹp (fancy)

Alert/Confirm/Prompt mặc định của trình duyệt không thể style. Giải pháp: tạo custom modal dialog với HTML/CSS/JS.

Ví dụ Custom Alert (Vanilla JS, không jQuery)

<!DOCTYPE html>
<html>
<head>
<style>
.alert-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:1000; animation:fade .2s; }
.alert-box { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; padding:24px; border-radius:12px; width:90%; max-width:360px; box-shadow:0 8px 30px rgba(0,0,0,0.15); text-align:center; animation:pop .2s; }
.alert-title { font-weight:600; margin-bottom:8px; }
.alert-message { color:#444; margin-bottom:20px; line-height:1.5; }
.alert-btn { padding:10px 24px; background:#1976d2; color:#fff; border:none; border-radius:6px; font-size:1rem; cursor:pointer; }
@keyframes fade { from{opacity:0} to{opacity:1} }
@keyframes pop { from{opacity:0; transform:translate(-50%,-40%)} to{opacity:1; transform:translate(-50%,-50%)} }
</style>
</head>
<body>
    <button onclick="showAlert('Chào bạn! Đây là custom alert đẹp mắt.')">Thử Alert
    <div class="alert-overlay" id="alertOverlay">
        <div class="alert-box">
            <div class="alert-title" id="alertTitle">Thông báo</div>
            <div class="alert-message" id="alertMsg"></div>
            <button class="alert-btn" onclick="hideAlert()">OK</button>
        </div>
    </div>
    <script>
        function showAlert(msg, title="Thông báo") {
            document.getElementById('alertMsg').textContent = msg;
            document.getElementById('alertTitle').textContent = title;
            document.getElementById('alertOverlay').style.display = 'block';
        }
        function hideAlert() {
            document.getElementById('alertOverlay').style.display = 'none';
        }
        // Đóng khi click overlay
        document.getElementById('alertOverlay').addEventListener('click', e => {
            if(e.target.id === 'alertOverlay') hideAlert();
        });
        // Đóng khi ESC
        document.addEventListener('keydown', e => { if(e.key==='Escape') hideAlert(); });
    </script>
</body>
</html>

Tương tự cho Confirm (2 nút Yes/No) và Prompt (có input).