如何通过JS点击事件逻辑触发调用CSS类的HTML弹窗显示

问题核心错误点 #

• 混淆了服务端PHP和客户端JS的执行顺序：PHP在页面发送到浏览器之前就已经在服务器执行完成，写在JS点击回调里的PHP代码会在页面加载时就直接输出HTML到JS代码块中，直接导致JS语法报错，根本不会等到用户点击才执行。
• CSS触发逻辑不匹配：你现在用的.overlay:target选择器需要URL锚点匹配overlay的id才能生效，现有代码既没有给overlay设置id，也没有触发锚点变化或者主动修改可见性的逻辑。
• 存在多处语法错误：JS代码块中直接嵌入HTML导致语法异常；CSS里.popup .close的样式规则未闭合，内部嵌套的#left选择器写法不符合CSS规范；弹窗的关闭按钮a标签缺少闭合标记和可点击内容。

修复方案 #

1. 调整PHP输出位置 #

直接把弹窗HTML输出到页面body末尾，不要嵌入JS代码中：

<?php
echo "<div class=\"box\">";
echo "<div class=\"button\"></div>";
echo "<div class=\"overlay\" id=\"loginPopup\">";
echo "<div class=\"popup\">";
echo "<h3>Looks like you are not logged in!</h3>";
echo "<a class=\"close\" href=\"#\">&times;</a>";
echo "<div class=\"content\">";
echo "Please identify yourself before voting.";
echo "<div class =\"content2\">";          
echo "<a href=\"registration.php\">Register</a>";  
echo "<a href=\"login.php\" class=\"right\">Login</a>";           
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
echo "</div>";
?>

2. 修正JS逻辑 #

JS只负责点击时切换弹窗的显示状态：

$(function(){
  // 点击按钮显示弹窗
  $(".increment").click(function(){
    $(".overlay").addClass("active");
  });
  // 点击关闭按钮隐藏弹窗
  $(".close").click(function(e){
    e.preventDefault();
    $(".overlay").removeClass("active");
  });
  // 点击遮罩层也可以关闭弹窗
  $(".overlay").click(function(e){
    if(e.target === this) {
      $(this).removeClass("active");
    }
  });
});

3. 修正CSS代码 #

把:target选择器改成JS控制的.active类，同时修复语法错误：

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 999; /* 增加层级确保弹窗在最上层 */
}

/* 把原来的:target改成.active，和JS逻辑匹配 */
.overlay.active {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 0.3s ease-in-out; /* 把5s改成0.3s，动画更合理 */
}

.popup h3 { /* 你弹窗里用的是h3，不是h2，这里对应修改 */
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 10px;
  right: 20px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
/* 修复原来嵌套的错误写法 */
#left {
  text-align: left;
}

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