Elementor点击锚点按钮同时关闭模态框的实现方法咨询

开发者阿泽

2026-9-26

可行实现方案

下面分两种技术栈给出可直接复用的代码：

1. jQuery 实现方案

给所有菜单内的锚点按钮绑定统一的点击事件，触发时执行关闭弹窗的逻辑即可，不需要改动现有锚点的跳转逻辑：

// 把 .menu-modal 替换为实际的弹窗容器选择器，.menu-anchor 替换为实际的锚点按钮选择器
$('.menu-anchor').on('click', function() {
  // 关闭弹窗逻辑，根据你的实际实现调整
  $('.menu-modal').hide();
  // 如果弹窗是通过类名控制显示状态，换成下面的写法即可
  // $('.menu-modal').removeClass('show');
});

如果需要同时实现平滑滚动效果，可以覆盖默认锚点跳转行为：

$('.menu-anchor').on('click', function(e) {
  e.preventDefault();
  const targetId = $(this).attr('href');
  // 300是滚动动画时长，可自行调整
  $('html, body').animate({
    scrollTop: $(targetId).offset().top
  }, 300);
  // 关闭弹窗
  $('.menu-modal').hide();
});

2. 原生JS实现方案

不需要依赖jQuery的写法如下：

document.querySelectorAll('.menu-anchor').forEach(anchor => {
  anchor.addEventListener('click', () => {
    const modal = document.querySelector('.menu-modal');
    // 关闭弹窗
    modal.style.display = 'none';
    // 类名控制显隐的版本：modal.classList.remove('show');
  });
});

带平滑滚动的原生版本：

document.querySelectorAll('.menu-anchor').forEach(anchor => {
  anchor.addEventListener('click', (e) => {
    e.preventDefault();
    const targetId = anchor.getAttribute('href');
    const targetElement = document.querySelector(targetId);
    targetElement.scrollIntoView({behavior: 'smooth'});
    document.querySelector('.menu-modal').style.display = 'none';
  });
});