Add a popup in a custom php webapp

Question

I need to add a popup to the following web app

https://github.com/gunet/openeclass/tree/3.12.x

I have tried to put my code to many files by trial and error but no luck.

Could someone tell me if below code is the appropriate way to do this and in which file should i put it so it shows up in the first page?

https://openeclass.panteion.gr/

<?php
// PHP program to pop an alert
// message box on the screen
  
// Display the alert box 
echo '<script>alert("Welcome to our site")</script>';  

?>

As suggested i plan to use the following. Where should i put it and how should i combine it with a cookie so that it is shown only once to each user?

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

You should not use JavaScript "alert()" function to show some messages to the users. It is an ugly way to do such thing and it is mostly used for old school debugging helper.

In my opinion you can trigger a popover or an alert (see Bootstrap 3 documentation) in $(document).ready(function () { ... } section within template/default/js/main.js. But this would show the message to your visitors every time they open any page. That is why you should show the message only once and remember it in a Cookie variable such as "messageShown=true". In the section which I mentioned above you should check like if(Cookies.messageShown=='false') before you trigger the alert message.