Q:

Como exibo uma mensagem/alerta no primeiro acesso ao site?

Gostaria de criar um "Newsletter" que exibisse no primeiro e de vez em quando ao acessar o site. Já possuo ela criada, mas, não consigo encontrar as funções e tags que me auxilie.

A:

Como brinde de boas vindas fiz um com uso de cookies em 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)), "/");
}
?>

O de vez enquanto coloquei de 2 em dois dias mas pode alterar
substitua

<p>Conteudo</p>
 <p class="text-warning"><small>blablabla</small></p>
pelo que vc quer apresentar no modal.
Dicas:

Modal pequena - substituir <div class="modal-content"> por <div class="modal-dialog modal-sm"> 
Modal grande - substituir <div class="modal-content"> por <div class="modal-dialog modal-lg">

o php é responsável por verificar o cookie e se não existir ou estiver expirado habilita, na proxima visita, o modal aparecer na tela imprimindo o codigo (jquery) responsavel para fazer aparecer o modal, ou seja, $("#myModal").modal('show');

Um pouco mais sobre modal
A estrutura padrão para os modais Bootstrap é apresentado abaixo em sua forma mais simples.
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>

É necessário manter uma hierarquia básica de divs (modal, modal-dialog e modal-content) conforme mostrado nas 3 primeiras linhas.
Na linha 6, temos o título do modal, contido na div com classe modal-header, e na linha 9 temos o conteúdo da mensagem, dentro da div com classe modal-body. O rodapé do modal é formado por uma div com classe modal-footer (linha 11), dentro da qual adicionamos um botão para fechar o modal.
Nas linhas 5 e 12, temos dois botões, com o mesmo atributo data-dismiss=”modal”, que faz com que ao serem clicados, o modal seja fechado, sem a necessidade de acrescentar mais linhas de JavaScript.

