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
(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">×</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 -->
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">×</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">×</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!
Muito bom!
Serviu pro que eu precisava.
Show muito bom mesmo.
Me ajudou muito!!! Obrigada 🙂
Obrigado por compartilhar.
Você saberia dizer se existe algum app/módulo deste modal para a plataforma Magento?
Abs e obrigado.
Cara não sei te dizer mais acredito que tenha sim, não cheguei a utilizar o Magento então não tenho muito conhecimento sobre o mesmo
Aprendi a fazer o modal sem extensão no magento. Se precisar de ajuda é só avisar.
Cris você poderia dá as dicas para inserir o modal no magento?
Grato
Muito bom, serviu exatamente para o que eu estava precisando. No final você mencionou uma dica bacana de o modal não aparecer por um período maior para quem já realizou a ação desejada. Só não consegui raciocinar como eu faria isso, você pode me ajudar?
Boa noite fagner, para realizar isso siga o procedimento que fiz no ultimo trecho do código essa parte
# Vamos criar o cookie com duração de 1 semana
$diasparaexpirar = 7;
setcookie(‘usuarioVisualizouModal’, ‘SIM’, (time() + ($diasparaexpirar * 24 * 3600)));
e depois faça uma verificação se esse cookie existir não exiba o modal para o usuário, assim que o tempo terminar o navegador se encarrega de remover o cookie automaticamente blz? duvidas só postar!
Muito bom esse scripts gostei.
Vlw!
coloquei o codigo exatamente igual mas ele nao funciona 🙁
Muito obrigada, me ajudou muito!
Esse código não funciona com o Jquery 1.7.2?
Muito bom.
Muito Obrigado !! Ajudou bastante.
Escreve o cookie tanto em PHP quanto em JS mas a modal não rola nem a pau
Excelente post! Consegui fazer aqui em php sem problemas.
Mas eu tenho uma dúvida… Queria que o cookie fosse criado somente quando o usuário clicasse num determinado botão no modal. Até consegui fazer em javascript localmente mas quando ficou online não ia nem a pau.
Existe uma forma de fazer isso? Imagina um site onde somente maiores de 18 anos possam entrar. É isso.
De qualquer forma parabéns pelo post.
Olá Eduardo tentar usar esta código para abrir o modal quando clicar em um botão.
Botão
+
Tentar isso.
Boa noite muito bom, deu certo no meu.
Agora uma duvida como eu fazer para excluir esta cookies?
Isso para que toda vez que o usuário sair por meu portal e entra novamente o modal abri,
tipo quando destrói a sessão
Muito bom, meus parabéns!!