Cách tạo alert box 3 nút (Yes, No, Cancel) bằng JavaScript

Alert/Confirm mặc định tối đa 2 nút. Tạo custom modal 3 nút.

Ví dụ Custom Confirm 3 nút (Vanilla JS)

<!DOCTYPE html>
<html>
<head>
<style>
.confirm-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:1000; }
.confirm-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; }
.confirm-message { margin-bottom:20px; line-height:1.5; }
.confirm-btns { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.confirm-btn { padding:10px 20px; border:none; border-radius:6px; font-size:1rem; cursor:pointer; min-width:80px; }
.btn-yes { background:#4CAF50; color:#fff; }
.btn-no { background:#f44336; color:#fff; }
.btn-cancel { background:#9e9e9e; color:#fff; }
</style>
</head>
<body>
    <button onclick="showConfirm()">Hỏi 3 lựa chọn</button>
    <div class="confirm-overlay" id="confirmOverlay">
        <div class="confirm-box">
            <div class="confirm-message" id="confirmMsg"></div>
            <div class="confirm-btns">
                <button class="confirm-btn btn-yes" id="btnYes">Yes</button>
                <button class="confirm-btn btn-no" id="btnNo">No</button>
                <button class="confirm-btn btn-cancel" id="btnCancel">Cancel</button>
            </div>
        </div>
    </div>
    <script>
        function showConfirm() {
            document.getElementById('confirmMsg').textContent = "Bạn có thích bóng đá?";
            const overlay = document.getElementById('confirmOverlay');
            overlay.style.display = 'block';
            const cleanup = () => {
                overlay.style.display = 'none';
                yesBtn.onclick = noBtn.onclick = cancelBtn.onclick = overlay.onclick = null;
            };
            const yesBtn = document.getElementById('btnYes');
            const noBtn = document.getElementById('btnNo');
            const cancelBtn = document.getElementById('btnCancel');
            yesBtn.onclick = () => { cleanup(); alert("Yes"); };
            noBtn.onclick = () => { cleanup(); alert("No"); };
            cancelBtn.onclick = () => { cleanup(); alert("Cancelled"); };
            overlay.onclick = e => { if(e.target === overlay) cleanup(); };
        }
    </script>
</body>
</html>