如何触发javascript弹出框的if条件内的HTML代码?

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>

,

为了能够关闭弹出窗口，您仍然必须附加所提供脚本的第二部分(您可以简单地将其插入phpif语句内的script标签(在HTMLbody元素的末尾)，如:

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

注意:这并没有改变这样一个事实，正如上面所说的，用XHR(例如通过ajax)处理这个问题会更好