点击div触发模态框后禁用该div 点击其他div再恢复点击的实现方案

算力阿峰

2026-9-29

实现方案

核心逻辑

通过类名标记触发模态框的.container-are-you-sure元素的可用状态，无需额外维护全局变量
点击模态框确认按钮后给触发元素加禁用类，再次点击时直接拦截逻辑不弹出模态框
监听.container-what-we-offer的点击事件，点击后移除触发元素的禁用类，恢复点击功能

补充CSS（模态框默认隐藏+禁用态样式）

/* 模态框基础样式，可根据自身需求调整 */
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 24px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  z-index: 9999;
}
/* 触发元素禁用态视觉样式，可省略 */
.container-are-you-sure.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none; /* 加这个属性可以直接禁止所有鼠标事件，连点击判断都可以省 */
}

完整jQuery代码

// 模态框显示封装
function showModal() {
  $('.modal').show();
}
// 模态框隐藏封装
function hideModal() {
  $('.modal').hide();
}

// 触发模态框元素点击事件
$('.container-are-you-sure').click(function() {
  // 有禁用类直接终止逻辑
  if ($(this).hasClass('disabled')) return;
  showModal();
});

// 模态框确认按钮点击事件
$('.modal button').click(function() {
  hideModal();
  // 给触发元素加禁用类
  $('.container-are-you-sure').addClass('disabled');
});

// 另一个div点击事件，恢复触发元素功能
$('.container-what-we-offer').click(function() {
  $('.container-are-you-sure').removeClass('disabled');
});