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

Question

I created an html site where the user can input a code in a text input and then this code is being inserted in a MYSQL database if certain conditions are met. In case of a successfull database entry I would like to notify the user with a little pop up message, which displays something like "Success" and also stating some data from the table row, the code was inserted into.
I found a nice looking pop up message on the following page, which I would like to use: https://www.gitto.tech/posts/animated-modal-box-using-html-css-and-javascript/ .
However, in the implementation from the page, the pop-up is triggered by the click of a button:

  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");
});

I would like to execute the pop-up based on an if-condition, in which I check whether an php variable is already set:

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

So, can anybody tell me how to successfully remove that "onClick" function of the pop-up?

Thanks in advance!

Answer 1

I understand that you reload the page after said data was inserted into database?

If so, what you can do to show pop-up initially, is to simply add class active to your popup (element with class popup , like that:

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

BUT

in order to be able to close the popup, you still will have to attach the second part of the provided script (you can simply insert it within script tags inside php if statement (at the end of HTML body element), like:

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

note: It doesn't change the fact that, as said above - it would be better to handle this withXHR (eg via ajax)