Question

I want to make a button just like http://www.snappages.com/ in which the help button is on right side on which one click the new box is open leaving the content behind. How to do this from scratch.

Answer 1

To position the button at right:

Use css fixed positioning with right as 0

To create an overlay

make elements like:

<div id="overlay">
<div id="help">
</div>
</div> 

with css:

#overlay{
position:fixed;
display:none;
top:0;
left:0;
width:100%;
height:100%;
background:rgb(255,255,255);
background:rgba(255,255,255,.5);
}

Inside the overlay make your actual help form
position it absolute and center it

#help{
position:absolute;
left:50%;
width:300px;
margin-left:-150px;
top:100px;
}

And on clicking the help button

$('#help-button').on('click',function(){
  $('#overlay').fadeIn('fast');
  });