jquery提示框确认取消

以下是使用 jQuery 实现提示框确认取消功能的完整指南：

一、基础实现方案

1. HTML结构

<div id="confirmBox" class="dialog">
  <div class="dialog-content">
    <p class="message"></p>
    <button class="confirm-btn">确认</button>
    <button class="cancel-btn">取消</button>
  </div>
</div>

通过动态修改 .message内容实现多场景复用

2. CSS样式

.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 9999;
  display: none;
}

.dialog-content {
  padding: 20px;
  text-align: center;
}

button {
  margin: 10px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.confirm-btn {
  background: #4CAF50;
  color: white;
}

标准化样式设计，支持主题色定制

3. jQuery核心代码

function showConfirm(options) {
  const $box = $('#confirmBox');
  
  // 初始化内容
  $box.find('.message').text(options.message || '确认操作？');
  
  // 显示弹窗
  $box.fadeIn(200);
  
  // 确认回调
  $box.find('.confirm-btn').off('click').on('click', function() {
    options.onConfirm && options.onConfirm();
    $box.fadeOut(200);
  });
  
  // 取消回调
  $box.find('.cancel-btn').off('click').on('click', function() {
    options.onCancel && options.onCancel();
    $box.fadeOut(200);
  });
}

// 使用示例
$('#deleteBtn').click(function() {
  showConfirm({
    message: '确定要删除该记录吗？',
    onConfirm: function() {
      // 执行删除操作
      console.log('已删除');
    },
    onCancel: function() {
      console.log('操作取消');
    }
  });
});

封装可复用函数，支持自定义回调

二、进阶功能扩展

1. 防误触关闭

// 在关闭按钮点击时增加确认
$('.dialog').on('click', '.close-btn', function(e) {
  e.stopPropagation();
  if (confirm('确定要关闭吗？')) {
    $('#confirmBox').hide();
  }
});

防止用户误触关闭弹窗

2. 动态内容加载

function loadDynamicContent(url) {
  $.get(url, function(html) {
    $('#confirmBox .dialog-content').html(html);
  });
}

支持从服务器加载自定义内容

3. 动画效果增强

// 添加滑动动画
$('#confirmBox').hide().fadeIn(300).delay(2000).slideUp(300);

提升用户体验的动画方案

三、最佳实践

代码复用 通过参数化配置实现单例模式，避免重复代码
兼容性处理 // 兼容IE事件绑定 if ($.isFunction($.fn.on)) { // 使用on方法 } else { // 使用bind方法 }
可访问性  <div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDesc">

四、完整示例

<!DOCTYPE html>
<html>
<head>
  <title>确认弹窗示例</title>
  <style>
    /* 上述CSS样式 */
  </style>
</head>
<body>
  <button id="deleteBtn">删除数据</button>
  
  <div id="confirmBox" class="dialog">
    <div class="dialog-content">
      <p class="message"></p>
      <button class="confirm-btn">确认</button>
      <button class="cancel-btn">取消</button>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 上述jQuery代码
  </script>
</body>
</html>