0

Preciso fazer um sistema que abre "Modais" durante a navegação no site, informando algumas coisas, janelas no lado direito no canto inferior e outras janelas no lado esquerdo no canto inferior, com tempo de apresentação.

Não é modal para "congelar" a tela, são informativos que aparecem durante a navegação....

Alguém têm um exemplo para isso?


Segue o Exemplo,

Uma imagem é melhor do que 1000 palavras heheheh

Olha ali embaixo "Hay 10 personas mirando este hotel"...

inserir a descrição da imagem aqui

2

1 Resposta 1

0

O Materialize possui a FeatureDiscovery, é um bom recurso para guiar o usuário em algumas funcionalidades do sistema, segue exemplo do site:

$('#menu').on('click', function() {
    $('.tap-target').tapTarget('open');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Element Showed -->
<a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a>

<!-- Tap Target Structure -->
<div class="tap-target" data-activates="menu">
  <div class="tap-target-content">
    <h5>Title</h5>
    <p>A bunch of text</p>
  </div>
</div>

Para ativar/desativar a exibição você utiliza:

$('.tap-target').tapTarget('open');    
$('.tap-target').tapTarget('close');

Edit

Vi que o queria é diferente do que respondi, pode utilizar toast, também do mesmo framework, segue exemplo:

$(document).on('click', '#toast-container .toast', function() {
    $(this).fadeOut(function(){
        $(this).remove();
    });
});

var content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis lectus quis feugiat mattis. Maecenas varius orci et magna volutpat, vel vehicula velit imperdiet. Sed accumsan non sapien quis mattis. Nam tristique nunc in ligula venenatis porta. Quisque rhoncus elementum risus nec tincidunt. Curabitur et tempor turpis. Fusce facilisis orci vitae convallis lobortis. Mauris auctor blandit lectus vel pulvinar. Morbi non ipsum pharetra, interdum libero sed, viverra orci. Morbi semper placerat dui vulputate ornare. Aenean quis malesuada leo, sit amet pretium sapien. Aenean tristique interdum velit, tristique consectetur nisl vestibulum ac. Curabitur id tellus rhoncus, tristique libero vel, dignissim mauris. Etiam pellentesque venenatis sagittis. <i class="material-icons prefix right">close</i>';
Materialize.toast(content);
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Para utilizar basta usar o comando Materialize.toast("Conteúdo", tempo em milissegundos)(o tempo é opcional), note que no final do conteúdo eu adicionei <i class="material-icons prefix right">close</i>, isso serve apenas para exibir o "X" de fechar, funciona sem ele.

O código:

$(document).on('click', '#toast-container .toast', function() {
    $(this).fadeOut(function(){
        $(this).remove();
    });
});

Serve para remover o aviso da tela ao ser clicado

7
  • Muito maneiro esse gesture, tem mais opções dele pra compartilhar? 29/07/2017 às 3:11
  • Sim, ajudou muitoooooo, só não está funcionando o "Materialize.toast(content, 500000000000000000);"... time de abertura... 30/07/2017 às 12:38
  • @LuccasGaulia Nesse caso você pode marcar como aceita 30/07/2017 às 12:39
  • O time está muito alto, faz assim, para cada segundo, você coloca 3 zeros na frente. Ex: 15 segundo = 15000. 1 segundo = 1000 milisegundos 30/07/2017 às 12:40
  • Mesmo assim, ele não abre depois de 51 segundos... 31/07/2017 às 2:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .