Window(s) Modal opening at the same time or at different times

Question

I need to make a system that opens "Modais" while browsing the site, informing some things, windows on the right side at the bottom and other windows on the left side at the bottom, with presentation time.

It is not modal to "freeze" the screen, are informative that appear during navigation....

Someone has an example for this?

---

Follow the Example,

An image is better than 1000 heheheh words

Look down there "Hay 10 personas targeting this hotel"...

Answer 1

The Materialize owns the Featurediscovery, is a good resource to guide the user in some system functionalities, follows 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>
<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>

To enable/disable the display you use:

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

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

---

Edit

I saw that the wanted is different of what I answered, can use toast, also from the same framework, follows 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>
<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">

To use just use the command Materialize.toast("Conteúdo", tempo em milissegundos)(time is optional), note that at the end of the content I added <i class="material-icons prefix right">close</i>, this serves only to display the "X" close, works without it.

The code:

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

Serves to remove screen warning when clicked