如何通过 HTML 代码中的 if 条件触发 javascript 弹出框？

Question

我创建了一个 html 站点，用户可以在其中输入文本输入中的代码，然后如果满足某些条件，则将此代码插入到 MYSQL 数据库中。 如果数据库条目成功，我想通过一个小的弹出消息通知用户，该消息显示“成功”之类的内容，并说明表行中的一些数据，代码已插入。
我在以下页面上发现了一个漂亮的弹出消息，我想使用它： 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

我知道您在将数据插入数据库后重新加载页面？

如果是这样，您最初可以做什么来显示弹出窗口，只需将类active添加到您的弹出窗口（具有类popup元素，如下所示：

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

但

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

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

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