如何在HTML代码中通过if-condition触发javascript弹框？

Question

我创建了一个 html 站点，用户可以在该站点的文本输入中输入代码，然后如果满足某些条件，该代码将被插入到 MYSQL 数据库中。如果数据库条目成功，我想用一条弹出消息通知用户，它显示类似“成功”的内容，还说明 table 行中的一些数据，代码已插入。
我在下一页发现了一条漂亮的弹出消息，我想使用它：https://www.gitto.tech/posts/animated-modal-box-using-html-css-and-javascript/。
但是，在页面的实现中，弹出窗口是由点击按钮触发的：

  document.getElementById("open-popup-btn").addEventListener("click",function(){
  document.getElementsByClassName("popup")[0].classList.add("active");
});
 
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});

我想根据 if 条件执行弹出窗口，我在其中检查是否已设置 php 变量：

<?php 
     if (isset($group)) {
?>    ......HTML code.....

那么，谁能告诉我如何成功删除弹出窗口的“onClick”功能？

提前致谢！

Answer 1

我了解到您在将上述数据插入数据库后重新加载页面？

如果是这样，您最初可以做的是显示弹出窗口，只需将 class active 添加到您的弹出窗口（带有 class popup 的元素，像那样:

<div class="popup center active">
  ...
</div>

但是

为了能够关闭弹出窗口，您仍然需要附加所提供脚本的第二部分（您可以简单地将其插入 php [=15] 内的 script 标签内=] 语句（在 HTML body 元素的末尾），如：

<script>
  document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
    document.getElementsByClassName("popup")[0].classList.remove("active");
  });
</script>

注意：它不会改变事实，如上所述 - 用 XHR 处理这个问题会更好（例如通过 ajax）

如何在HTML代码中通过if-condition触发javascript弹框？

How to trigger javascript pop-up box by if-condition within the HTML code?

html

javascript

css

jquery

popup