Elementor免费版弹窗添加额外关闭按钮的实现方法咨询

方案1：复用原关闭按钮的点击逻辑（推荐） #

这个方法直接借用弹窗自带关闭按钮的触发逻辑，不用关心弹窗的隐藏动画或状态处理，兼容性最好：

1. 在弹窗内添加一个HTML组件，插入自定义关闭按钮：

<button class="custom-close-btn">关闭弹窗</button>

2. 添加以下JavaScript代码（可以放在HTML组件的script标签里，或者主题的自定义JS区域）：

jQuery(document).ready(function($) {
  // 监听自定义按钮的点击事件
  $(document).on('click', '.custom-close-btn', function() {
    // 触发原关闭图标的点击事件
    $('.ue-simple-popup-close').click();
  });
});

方案2：直接操作弹窗DOM隐藏 #

如果原关闭按钮的逻辑比较复杂，也可以直接找到弹窗容器和背景遮罩，手动设置隐藏：

1. 同样先添加自定义按钮（和方案1的HTML代码一致）
2. 使用以下JS代码（注意根据实际DOM结构调整选择器）：

jQuery(document).ready(function($) {
  $(document).on('click', '.custom-close-btn', function() {
    // 隐藏当前按钮所在的弹窗容器
    $(this).closest('.ue-simple-popup').hide();
    // 隐藏弹窗背景遮罩（如果有，类名需根据实际情况修改）
    $('.ue-simple-popup-overlay').hide();
  });
});

提示：可以通过开发者控制台查看弹窗容器和遮罩的具体类名，替换代码中的选择器。

方案3：自定义按钮样式（可选） #

如果需要让自定义按钮和网站风格统一，添加以下CSS代码（放在主题自定义CSS区域或Elementor的自定义CSS里）：

.custom-close-btn {
  padding: 8px 16px;
  background-color: #2c3e50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin: 10px 0;
}

.custom-close-btn:hover {
  background-color: #34495e;
}

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