Creating A "popup" View To To Cover A Collection View

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. Currentl

Solution 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!