如何使用WordPress导航链接触发我的javascript弹出表单？

我已经创建了一个javascript弹出式联系人表单，单击WordPress导航项后如何触发它

我已经尝试了下面的代码，效果很好。但是，1秒钟后，它加载了我在WordPress中设置导航项的页面

document.getElementById('menu-item-177').addEventListener("click", function() {
  document.querySelector('.bg-modal').style.display = "flex";
  $('body').css('overflow','hidden')
});

我试图删除页面，但很明显导航链接消失了。我还尝试删除WordPress菜单设置中的菜单项，同样的结果

---

我需要在点击导航链接时阻止页面加载。有办法解决这个问题吗？

请确保您选择的

会阻止浏览器执行与该元素链接的任何行为。就像使用
标记导航一样。看看为什么知道你点击的元素很重要？通过添加，您可以添加自己的行为。请参见下面的示例

$('#menu-item-177 > a').on('click', function(event) {
  event.preventDefault(); // Prevents default navigation behavior.
  $('.bg-modal').css('display', 'flex');
  $('body').css('overflow', 'hidden');
});

您需要停止导航并打开弹出窗口，对吗？@EmielZuurbier是的，没错，
#菜单项-177
元素是什么类型的元素？@EmielZuurbier这是WordPress生成的导航类。我知道，这是元素的ID，但是什么元素<代码>

<代码>？非常感谢！我已经找了大约一周的答案了。你的第一个答案确实有效，但我也尝试了你更新的答案，它们都有效。祝你有美好的一天！