Creating a "popup" view to to cover a collection view

Question

I am currently confused about how to create a view through javascript as a kind of "pop-up" that would cover the mailbox when a cell is hit to display its particular info.

Currently my code for the mailbox is as follows (cells dynamically generated):

        <div class="row">
          <div class="col s8">
            <div class="collection-header center">
              <h4>Email Box</h4>
            </div>
            <ul class="collection with-header">
              <div id="mailCollection">
              <!-- Dynamically Add These Cells To this view -->
              </div>
            </ul>
          </div>

This is what it looks like:

The cells are created as followed:

  for(var i = 0; i < data.length; i++){
     $("#mailCollection").append("<a id='"  + data[i]["id"]  + "'style='color:grey' href='#' onClick='displayMessage(this)'><li class='collection-item avatar email-unread gray'><span class='circle green darken-1'></span><span class='email-title'>"
     + "Sample" + "</span><p class='truncate grey-text ultra-small'>"
     + "Sample"  + "</span> <p class='truncate blue-text ultra-small'>"
     + "Sample" + "</p> <a href='#' class='secondary-content email-time'><span class='gray-text ultra-small'>"
     + '<label> <input type="checkbox" class="filled-in" checked="checked"/> <span>Check</span> </label>'
     + "</span></li></a>")
   }

How would I create a view that would cover the collection view so I could display contents of the message with a button to dismiss the detail view?

Answer 1

The best way for me is define a modal div which in default have a display none property. Then you can display with position fixed or position absolute depen you needs:

If you want to cover all screen, your modal position is fixed and you can put div anywhere of your code.

Else if you only want to cover one zone, put your modal into the div which you want to cover and put the parent div with position relative.

<div id='mymodal'>
   <div class='header'>
      <div id='modalclose'>X</div>
   </div>
   <div class='content'>

   </div>
</div>

And css:

#mymodal{
    display: none;
    position: fixed; /* Or absolute*/
    top: 0;
    right: 0;
    left: 0;
    bottom: 0; 
    z-index: 0;
}
#mymodal.active{
    display: block;
    z-index: 999;
}

Then, you only have to control the class and the content, with jquery click for example:

$(".sample").click(function(){
   $("#mymodal .content").html('') //Clean html inside
   $("#mymodal .content").html('<h1>Here fill for example title</h1>') //Inner html inside
   $("#mymodal").addClass('active')
})

And for close the modal do the same:

$("#modalClose").click(function(){
    $("#mymodal").removeClass('active')
})

And there is!

If you want to have better animation, change display: none; for opacity: 0; and display:block; for opactity: 1; and add transition: 1s; in #mymodal

Hope this be helpfully!