如何通过 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 @ 的末尾） 987654327@ 元素），比如：

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

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