Cách đổi nhãn nút bấm trong confirm box bằng JavaScript

Confirm mặc định chỉ có "OK/Cancel" (tiếng Anh) hoặc bản dịch trình duyệt, không đổi được. Phải tự tạo custom confirm.

Ví dụ Custom Confirm với nhãn tùy chỉnh

<!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:10px; justify-content:center; }
.confirm-btn { padding:10px 24px; border:none; border-radius:6px; font-size:1rem; cursor:pointer; }
.btn-yes { background:#4CAF50; color:#fff; }
.btn-no { background:#f44336; color:#fff; }
</style>
</head>
<body>
    <button onclick="showConfirm('Bạn có chắc chắn?', 'Đồng ý', 'Hủy bỏ')">Xác nhận
    <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>
            </div>
        </div>
    </div>
    <script>
        function showConfirm(msg, yesLabel, noLabel, onYes, onNo) {
            document.getElementById('confirmMsg').textContent = msg;
            document.getElementById('btnYes').textContent = yesLabel;
            document.getElementById('btnNo').textContent = noLabel;
            const overlay = document.getElementById('confirmOverlay');
            overlay.style.display = 'block';
            const cleanup = () => {
                overlay.style.display = 'none';
                yesBtn.removeEventListener('click', onYesHandler);
                noBtn.removeEventListener('click', onNoHandler);
                overlay.removeEventListener('click', overlayHandler);
            };
            const yesBtn = document.getElementById('btnYes');
            const noBtn = document.getElementById('btnNo');
            const onYesHandler = () => { cleanup(); if(onYes) onYes(); };
            const onNoHandler = () => { cleanup(); if(onNo) onNo(); };
            const overlayHandler = e => { if(e.target === overlay) cleanup(); };
            yesBtn.addEventListener('click', onYesHandler);
            noBtn.addEventListener('click', onNoHandler);
            overlay.addEventListener('click', overlayHandler);
        }
    </script>
</body>
</html>