如何在JavaScript/JQuery中点击按钮时用Yes/No确认框替代OK/Cancel

嘿，这个需求太常见了！默认的confirm()对话框按钮文本是浏览器自带的OK/Cancel，没法直接改成Yes/No，所以咱们得自己动手实现自定义确认框，或者用现成的库来搞定。下面给你三种实用的方案，覆盖原生JS、jQuery和jQuery UI场景：

1. 原生JavaScript实现（无需任何库） #

如果不想引入额外依赖，完全自己写是最灵活的方式，步骤很清晰：

第一步：准备HTML结构 #

先写好隐藏的确认框和遮罩层：

<!-- 自定义确认框 -->
<div id="customConfirm" style="display: none;">
  <p id="confirmText"></p>
  <button id="btnYes">Yes</button>
  <button id="btnNo">No</button>
</div>

<!-- 遮罩层，防止点击背景 -->
<div id="overlay" style="display: none;"></div>

<!-- 触发按钮 -->
<button id="triggerBtn">点击弹出确认框</button>

第二步：添加CSS美化 #

让对话框看起来更像原生弹窗：

#customConfirm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  z-index: 1000;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}

#customConfirm button {
  margin: 0 10px 0 0;
  padding: 8px 18px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

#btnYes { background: #2196F3; color: white; }
#btnNo { background: #f44336; color: white; }

第三步：写JS逻辑控制显示/隐藏 #

封装成可复用的函数，方便在任何地方调用：

// 获取DOM元素
const triggerBtn = document.getElementById('triggerBtn');
const customConfirm = document.getElementById('customConfirm');
const overlay = document.getElementById('overlay');
const confirmText = document.getElementById('confirmText');
const btnYes = document.getElementById('btnYes');
const btnNo = document.getElementById('btnNo');

// 自定义确认框函数
function showYesNoConfirm(message, onYes, onNo) {
  confirmText.textContent = message;
  customConfirm.style.display = 'block';
  overlay.style.display = 'block';

  // 绑定Yes按钮事件
  btnYes.onclick = () => {
    hideConfirm();
    if (typeof onYes === 'function') onYes();
  };

  // 绑定No按钮事件
  btnNo.onclick = () => {
    hideConfirm();
    if (typeof onNo === 'function') onNo();
  };
}

// 隐藏确认框的辅助函数
function hideConfirm() {
  customConfirm.style.display = 'none';
  overlay.style.display = 'none';
}

// 点击触发按钮弹出确认框
triggerBtn.addEventListener('click', () => {
  showYesNoConfirm('你确定要删除这条数据吗？',
    () => alert('已执行删除操作！'),
    () => alert('操作已取消')
  );
});

2. jQuery版实现（简化DOM操作） #

如果项目已经用了jQuery，代码可以更简洁，还能封装成jQuery方法复用：

<!-- 结构和之前类似 -->
<div id="jqConfirm" style="display:none;">
  <p id="jqConfirmText"></p>
  <button class="jqBtn yes">Yes</button>
  <button class="jqBtn no">No</button>
</div>
<div id="jqOverlay" style="display:none;"></div>
<button id="jqTrigger">点击弹出jQuery确认框</button>

// 封装成jQuery插件
$.fn.yesNoConfirm = function(message, yesCallback, noCallback) {
  $('#jqConfirmText').text(message);
  $('#jqConfirm, #jqOverlay').show();

  // 绑定按钮事件（用off防止重复绑定）
  $('.jqBtn.yes').off('click').on('click', () => {
    $('#jqConfirm, #jqOverlay').hide();
    if ($.isFunction(yesCallback)) yesCallback();
  });

  $('.jqBtn.no').off('click').on('click', () => {
    $('#jqConfirm, #jqOverlay').hide();
    if ($.isFunction(noCallback)) noCallback();
  });
};

// 使用方式
$('#jqTrigger').click(() => {
  $(this).yesNoConfirm('确定要提交表单吗？',
    () => console.log('表单已提交'),
    () => console.log('提交已取消')
  );
});

3. jQuery UI Dialog（快速省心） #

如果项目里已经引入了jQuery UI，直接用它的Dialog组件就能快速实现Yes/No确认框，样式还自带统一风格：

$('#uiTrigger').click(() => {
  $('<div>').dialog({
    modal: true,
    title: '确认操作',
    content: '你确定要继续吗？',
    buttons: {
      'Yes': function() {
        $(this).dialog('close');
        alert('已确认操作！');
        // 这里写Yes后的业务逻辑
      },
      'No': function() {
        $(this).dialog('close');
        alert('操作已取消');
        // 这里写No后的逻辑
      }
    },
    close: function() {
      $(this).remove(); // 关闭后移除元素，避免重复创建
    }
  });
});

总结一下： #

• 原生JS方案：适合不想加额外依赖的场景，完全自定义样式和逻辑
• jQuery方案：简化DOM操作，代码更简洁，适合已有jQuery的项目
• jQuery UI方案：最快最省心，适合已经用了UI库的项目，样式统一

内容的提问来源于stack exchange，提问作者Sayak Deyashi