如何实现URL含锚点Hash时自动打开对应ID的Popin弹窗

解决思路 #

你当前的代码仅绑定了<a>标签的点击事件来触发弹窗，没有监听页面初始加载时的地址栏锚点，因此直接访问带锚点的URL不会触发弹窗。我们只需要新增页面加载时的锚点判断逻辑，同时抽离公共的弹窗打开方法避免代码冗余即可。
另外原有代码存在重复追加关闭按钮的问题：HTML结构中已经写了.close-popin元素，点击a标签时再次append会导致关闭按钮重复生成，优化时也会一并修复。

完整修改后的代码 #

var fn_popin = function () {
  // 先隐藏所有弹窗
  $(".is-style-popin").hide();

  // 抽离公共的弹窗打开方法，复用逻辑
  function openPopin(popinId) {
    const $targetPopin = $("#" + popinId);
    if (!$targetPopin.length) return;
    // 先清空已有的关闭按钮绑定，避免重复绑定
    $targetPopin.find(".close-popin").off("click").on("click", function () {
      $targetPopin.hide();
      $("body").removeClass("open-popin");
    });
    $targetPopin.show().addClass("popOpen");
    $("body").addClass("open-popin");
  }

  // 原有a标签点击触发逻辑
  $("a").each(function (i, el) {
    $(el).click(function (event) {
      const href = $(el).attr("href");
      if (!href.includes("#")) return;
      const urlHash = href.split("#")[1];
      if ($("#" + urlHash).hasClass("is-style-popin")) {
        event.preventDefault();
        event.stopPropagation();
        openPopin(urlHash);
      }
    });
  });

  // 新增：页面加载时读取地址栏锚点触发弹窗
  if (window.location.hash) {
    // 去掉hash开头的#号
    const initPopinId = window.location.hash.slice(1);
    openPopin(initPopinId);
  }
};

// 页面DOM加载完成后执行初始化
$(document).ready(function() {
  fn_popin();
});

优化说明 #

• 抽离了openPopin公共方法，点击链接和页面加载两种场景都可以复用，减少冗余代码
• 移除了重复追加关闭按钮的逻辑，复用HTML中已有的关闭元素，同时增加事件解绑避免重复绑定点击事件
• 增加了锚点对应的弹窗元素存在性判断，避免无匹配元素时报错
• 页面加载时自动读取地址栏的hash值，匹配到对应弹窗就自动打开

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