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

As a welcome gift I made a 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><scriptsrc="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 it every other day but you can change

     

replace

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

For what you want to present in the modal.

Tips:

• Modal small - replace <div class="modal-content"> with <div class="modal-dialog modal-sm">
• Large mode - replace <div class="modal-content"> with <div class="modal-dialog modal-lg">

  

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

Here is a working example where the cookie expires in 30 seconds for the modal to be displayed again

A little more about modal

The default framework for Bootstrap modals is shown 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.

In line 6, we have the modal title, contained in the div with class modal-header , and in line 9 we have the content of the message, inside the div with class modal-body . The modal footer consists of a div with class modal-footer (line 11), inside which we add a button to close the modal.

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