I need to make a system that opens "Modals" during the navigation in the site, informing some things, windows on the right side in the bottom corner and other windows on the left side in the lower corner, with presentation time.
It is not modal to "freeze" the screen, they are informative that appear during navigation ....
Does anyone have an example for this?
Follow the example,
An image is better than 1000 words heheheh
Look down there "There are 10 people watching this hotel" ...
Materialize has FeatureDiscovery , it is a good resource to guide the user in some system functionalities, following example of the 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><scriptsrc="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>To enable / disable the display you use:
$('.tap-target').tapTarget('open');
$('.tap-target').tapTarget('close');
I saw the wanted is different from what I answered, you can use toast , also from the same framework, following example:
$(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><scriptsrc="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"> To use just use the command Materialize.toast("Conteúdo", tempo em milissegundos) (the time is optional), note that at the end of the content I added <i class="material-icons prefix right">close</i> , this only serves to display the "X" to close, it works without it. >
The code:
$(document).on('click', '#toast-container .toast', function() {
$(this).fadeOut(function(){
$(this).remove();
});
});
Serves to remove screen warning when clicked