HTML使用onclick替代href绑定JS函数实现条件触发弹窗问题

代码修改方案 #

将原有按钮的href锚点跳转逻辑替换为onclick事件绑定，同时禁用a标签的默认跳转行为即可实现需求：

• 原HTML第二行按钮代码：

<a class="button" href="#popup1">upvote</a>

• 修改后的按钮代码：

<a class="button" href="javascript:void(0)" onclick="myFunction()">upvote</a>

补充说明 #

1. href="javascript:void(0)"用于取消a标签的默认跳转/锚点定位行为，避免点击按钮时修改页面URL
2. 如果需要点击弹窗右上角关闭按钮也能触发隐藏，可同步修改关闭按钮代码：

<a class="close" href="javascript:void(0)" onclick="myFunction()">&times;</a>

3. 原有JS代码无需调整，你可以直接在myFunction函数内添加自定义场景判断逻辑，满足特定条件才触发弹窗显隐即可，注意确保你的CSS代码中已经定义了.show类对应的弹窗可见样式。

完整修改后HTML代码 #

<div class="box">
<a class="button" href="javascript:void(0)" onclick="myFunction()">upvote</a>
</div>

<div id="popup1" class="overlay">
<div class="popup">
<h3>Looks like you are not logged in!</h3>
<a class="close" href="javascript:void(0)" onclick="myFunction()">&times;</a>
<div class="content">
Please identify yourself before voting.
</div>
</div>
</div>

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