如何实现两个指向同一页面的链接：正常打开/自动触发Modal？

你的需求完全可以实现，核心思路是通过**URL锚点（hash）**区分不同访问来源，页面加载时根据锚点判断是否自动触发弹窗。

1. 调整链接的href属性 #

给两个链接设置不同的目标地址，通过锚点标记弹窗需求：

• 正常打开页面的链接：直接指向目标页面/锚点
• 需要自动弹窗的链接：在目标地址后追加#open-modal锚点

修改后的HTML链接部分：

<!-- 正常打开页面的链接 -->
<div><a href="#landing">to the side</a></div>
<!-- 打开页面后自动弹窗的链接 -->
<div class="wp-block-button"><a href="#landing#open-modal" class="wp-block-button__link">to the side with modal</a></div>

注：如果是跨页面跳转，把#landing换成目标页面的完整URL即可，比如href="https://your-domain.com/landing-page#open-modal"

2. 重构JS逻辑 #

移除原代码中强制弹窗的逻辑，改成检测URL锚点后触发，同时封装弹窗函数提升复用性：

修改后的JS代码：

// 封装弹窗显示函数
function showModal() {
  $('.modal').removeClass('is-not-visible').addClass('is-visible');
  $('body').css('overflow', 'hidden');
}

// 封装弹窗隐藏函数
function hideModal() {
  $('.modal').removeClass('is-visible').addClass('is-not-visible');
  $('body').css('overflow', 'scroll');
}

$(document).ready(function () {
  // 点击弹窗触发按钮显示弹窗
  $(".modal-toggle").click(function () {
    showModal();
  });

  // 点击关闭按钮隐藏弹窗
  $(".modal-close").click(function () {
    hideModal();
  });

  // 页面加载完成后，检查URL锚点是否包含#open-modal，是则自动弹窗
  $(window).on('load', function () {
    if (window.location.hash.includes('#open-modal')) {
      showModal();
      // 可选：如果需要移除锚点，避免刷新页面再次弹窗，可添加下面一行
      // history.replaceState(null, null, window.location.pathname + window.location.search);
    }
  });
});

3. 同一页面跳转优化（可选） #

如果是同一页面内的跳转，可阻止默认锚点滚动行为，手动控制页面定位：

// 给带弹窗需求的链接添加点击事件
$('.wp-block-button__link[href*="#open-modal"]').click(function(e) {
  e.preventDefault();
  // 可选：跳转到页面指定位置
  // $('html, body').animate({scrollTop: $('#landing').offset().top}, 500);
  showModal();
});

逻辑说明 #

• 通过window.location.hash读取URL锚点，判断是否包含#open-modal来决定是否自动弹窗
• 封装弹窗显示/隐藏函数，让代码更简洁易维护
• 移除原代码中全局强制弹窗的逻辑，避免所有访问都触发弹窗

修改完成后，点击第一个链接会正常打开目标页面，点击第二个链接打开页面后会自动弹出Modal。

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