Dicas, tutorias, notícias sobre PHP, JS, jQuery, CSS, HTML, NodeJS, MySQL e muito mais
Abrir Modal Automaticamente na primeira vez que abrir a pagina

Abrir Modal Automaticamente na primeira vez que abrir a pagina

UPDATE 23/10/2018

Fala pessoal fiz uma vídeo aula no youtube mostrando na pratica utilizando o PHP

em breve irei fazer o vídeo utilizando apenas javascript também! valeu!


 

Let’s Go! 😀

Galera hoje vou ensinar uma coisa bem legal que pode ser útil para vocês implementarem em seus sites ou blog. esse recurso é bastante utilizado em  e-commerce que a primeira vez que você acessa o site é exibido um modal solicitando a você o cadastro do seu e-mail no newsletter deles, um exemplo de uma empresa que faz isso é o site do Shop Time


Capturar(Modal que é exibido ao abrir o site do shoptime)

para agilizar nosso processo de desenvolvimento vamos utilizar o Framework front-end Bootstrap

Bom já com o download feito do bootstrap crie uma estrutura de HTML Básico, e insira a lib de estilo e a lib de funções do Bootstap, (não se esquecam de também inserir a lib do jQuery pois o bootstrap utiliza ela)

<html>
<head>
<title>Exemplo Abrir Modal Automaticamente</title>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- Bootstrap JavaScript
<!-- Colocado no final do documento para que as páginas carreguem mais rápido -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

com a estrutura básica já pronta, vamos criar um modal (clique aqui para ver mais detalhes sobre o modal do bootsrap)

<div class="modal fade" id="meumodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fechar</span></button>
<h4 class="modal-title">Titulo Do Modal</h4>
</div>
<div class="modal-body">
<p>Conteudo do modal vem aqui.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Capturar

Para visualizar o modal, execute o comando abaixo no console do Javascript (para abri o console aperte F12 > Console)

$("#meumodal").modal("show");

bom com o modal já pronto só temos agora que criar a lógica para exibir somente a primeira vez que o usuário acessar a pagina, para não ficar aquele negocio chato abrindo toda hora em todas paginas.

Para isso vamos utilizar Cookies.
Cookie: é uma forma para salvar dados no lado cliente com data para expiração

A primeira vez que o usuário abrir a pagina iremos gravar um cookie com uma duração X (nesse exemplos vamos utilizar a duração de 1 semana) e sempre antes de exibir o modal e gravar o cookie, vamos verificar se esse cookie já não existe no navegador do usuário, pois se existir é uma sinal que o usuário já visualizo o modal e não precisamos exibir novamente.

Podemos cria o cookie com Javascript ou com PHP, você decide oque será mais pratico para seu projeto, irei demostrar dos dois modos nesse post.

Em Javascript

Criando o cookie

document.cookie = 'usuarioVisualizouModal=SIM';

mas antes de criar o cookie como citamos acima, devemos verificar se ele existe antes, se não existir exibimos o modal e criamos o cookie, e caso exista simplesmente não fazemos nada

// Obtém todos os cookies do documento
var cookies = document.cookie;

// Verifica se o cookie existe
if (cookies.indexOf("usuarioVisualizouModal") == -1)
{
// Entra aqui caso o cookie não exista no  navegador do usuário

// Crio um objeto Date do Javascript pegando a data de hoje e incrementando + 14 dias nessa data
var diasparaexpirar = 14;
var expiracao = new Date();
expiracao.setTime(expiracao.getTime() + (diasparaexpirar * 24*60*60*1000));

// Converte a data para string
expiracao = expiracao.toUTCString();

// Crio o cookie com a data de expiração
document.cookie = 'usuarioVisualizouModal=SIM; expires=' + expiracao+'; path=/';

// Exibo o modal
$("#meumodal").modal("show");
}

com isso temos tudo pronto, mas apenas isso não irá funcionar, porque precisamos que todo esse bloco de código seja executado assim que a pagina for carregada. Para isso iremos utilizar o método .ready() do jQuery.

Então nosso código final vai ficar assim

<html>
<head>
<title>Exemplo Abrir Modal Automaticamente</title>

<!-- Bootstrap CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="modal fade" id="meumodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fechar</span></button>
<h4 class="modal-title">Titulo Do Modal</h4>
</div>
<div class="modal-body">
<p>Conteudo do modal vem aqui.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Bootstrap JavaScript
================================================== -->
<!-- Colocado no final do documento para que as páginas carregam mais rápido -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
// Obtém todos os cookies do documento
var cookies = document.cookie;

// Verifica se o cookie existe
if (cookies.indexOf("usuarioVisualizouModal") == -1)
{
// Entra aqui caso o cookie não exista no  navegador do usuário

// Crio um objeto Date do Javascript pegando a data de hoje e incrementando + 7 dias nessa data
var diasparaexpirar = 7;
var expiracao = new Date();
expiracao.setTime(expiracao.getTime() + (diasparaexpirar * 24*60*60*1000));

// Converte a data para GMT
expiracao = expiracao.toUTCString();

// Crio o cookie com a data de expiração
document.cookie = 'usuarioVisualizouModal=SIM; expires=' + expiracao+'; path=/';

// Exibo o modal
$("#meumodal").modal("show");
}
});
</script>

</body>
</html>

 

Em PHP

Utilizaremos a base que criamos já com o modal, o diferencial é que em sua pagina PHP insira o seguinte código no topo da pagina

# Inicnando a variavel que vai indentificar se temos que exibir o modal ou não
$exibirModal = false;
# Verificando se não existe o cookie
if(!isset($_COOKIE["usuarioVisualizouModal"]))
{
# Caso não exista entra aqui.

# Vamos criar o cookie com duração de 1 semana</pre>
$diasparaexpirar = 7;
setcookie('usuarioVisualizouModal', 'SIM', (time() + ($diasparaexpirar * 24 * 3600)));

# Seto nossa variavel de controle com o valor TRUE ( Verdadeiro)
$exibirModal = true;
}

Observação: é importante que esse código em php sejá colocado no topo da pagina, pois ele trabalha de forma parecida com as sessões, ou seja ele manipula cabeçalhos HTTP, então eles precisam ser definidos antes de você enviar qualquer HTML, caso contrario você irá receber o alerta Warning: Cannot modify header information – headers already sent

com o nosso controle do cookie pronto, agora vamos ao nosso JS responsável por chamar a função que exibira o modal

vamos utilizar nosso variável de controle $exibirModal que criamos acima em nosso código HTML que ficara dessa forma

<?php if($exibirModal === true) : ?>
<script type="text/javascript">
$(document).ready(function()
{
$("#meumodal").modal("show");
});
</script>
<?php endif;?>

Acima acontece o seguinte, se nossa variável de controle criado la no topo como PHP for true, criamos um JS que assim que a pagina for carregada vai ser acionada, e seu conteúdo é exibir o modal. na próxima chamada da pagina como nosso cookie já irá existir, nossa variável de controle vai estar setada com o valor false, que é o default que criamos para ele, então a condição desse if que acabamos de criar não vai ser satisfeita e o modal não vai ser exibido…

(Lembrando que o modal irá aparece novamente daqui 1 semana que é quando o COOKIE irá expirar)

Então nosso código final com PHP ficará assim:

<?php
# Inicnando a variavel que vai indentificar se temos que exibir o modal ou não
$exibirModal = false;
# Verificando se não existe o cookie
if(!isset($_COOKIE["usuarioVisualizouModal"]))
{
# Caso não exista entra aqui.

# Vamos criar o cookie com duração de 1 semana
$diasparaexpirar = 7;
setcookie('usuarioVisualizouModal', 'SIM', (time() + ($diasparaexpirar * 24 * 3600)));

# Seto nossa variavel de controle com o valor TRUE ( Verdadeiro)
$exibirModal = true;
}

?>
<html>
<head>
<title>Exemplo Abrir Modal Automaticamente</title>

<!-- Bootstrap CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="modal fade" id="meumodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fechar</span></button>
<h4 class="modal-title">Titulo Do Modal</h4>
</div>
<div class="modal-body">
<p>Conteudo do modal vem aqui.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Bootstrap JavaScript
================================================== -->
<!-- Colocado no final do documento para que as páginas carregam mais rápido -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<?php if($exibirModal === true) : ?>

<script type="text/javascript">
$(document).ready(function()
{
$("#meumodal").modal("show");
});
</script>

<?php endif;?>

</body>
</html>

Bom pessoal é isso, espero que tenham aprendido a dica de hoje…

outra dica boa sobre isso é vocês fazerem o seguinte, criem o cookie com expiração de 01 semana ou seja toda semana ele irá aparecer 1 vez, mas se o usuário cadastrar o email ou realizar oque vocês quiserem através desse modal, alterem  a duração do COOKIE para 01 ano por exemplo, dessa forma fica algo melhor, pois se o usuário já cadastro o email não faz sentido na semana seguinte ele visualizar o modal para realizar o cadastro novamente não é ?! 😛

Deixem seus comentários!! valeu!

Autor

fmansano

Desenvolver Web a mais de 5 anos, trabalha como freelancer, e analista de sistemas web, com experiências em varias linguagens de programação web, com o foco em PHP e Javascript/jQuery.

21 comments

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *