How do I display a message/alert on first access to the site?

Question

I would like to create a "Newsletter" that displays on the first and from time to time when accessing the site. I already have it created, but, I can’t find the functions and tags that help me.

Answer 1

As a welcome gift I made one with use of cookies in php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Newsletter</h4>
            </div>
            <div class="modal-body">
                <p>Conteudo</p>
                <p class="text-warning"><small>blablabla</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<?php
 if ((!isset($_COOKIE['visitada']))&&(empty($_COOKIE['visitada']))){
 ?>
    <script type="text/javascript">
       $("#myModal").modal('show');
    </script>
<?php
    // cookie setado para expirar em 2 dias
    setcookie("visitada",  "sim", (time() + (2 * 24 * 3600)), "/");
}
?>

The once while I put on every two days but can change

substitute

<p>Conteudo</p> <p class="text-warning"><small>blablabla</small></p>

for what you want to present in the modal.

Tips:

• Small modal - replace <div class="modal-content"> for <div class="modal-dialog modal-sm">
• Large modal - replace <div class="modal-content"> for <div class="modal-dialog modal-lg">

php is responsible for checking the cookie and if it does not exist or is expired enables, on the next visit, the modal appear on the screen printing the code (jquery) responsible to make the modal appear, ie, $("#myModal").modal('show');

---

A little more about modal

The standard structure for Bootstrap modals is presented below in its simplest form.

01 <div id="myModal" class="modal fade">
02    <div class="modal-dialog">
03         <div class="modal-content">
04             <div class="modal-header">
05                 <button type="button" class="close" data-dismiss="modal"><span>×</span></button>
06                 <h4 class="modal-title">Título da mensagem</h4>
07             </div>
08             <div class="modal-body">
09                 <p>Conteúdo da mensagem</p>
10             </div>
11             <div class="modal-footer">
12                 <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
13             </div>
14         </div>
15     </div>
16 </div>

It is necessary to maintain a basic hierarchy of Divs (modal, modal-dialog and modal-content) as shown in the first 3 lines.

On line 6, we have the title of the modal, contained in the div with class modal-header, and on line 9 we have the contents of the message, inside the div with class modal-body. The modal footer is formed by a div with class modal-footer (line 11), within which we add a button to close the modal.

On lines 5 and 12, we have two buttons with the same attribute data-dismiss=”modal”, which causes the modal to be closed when clicked, without the need to add more Javascript lines.