title: Constrain popup window in view
body: <p>I know how to pop up a window on a page (with Jquery), what I want to do is constrain the popped up window on the page so when you scroll down it won't go up. The 'parent page' maybe very long but when the pop up appears, I want the page to 'resize' so you can't scroll down the page. The pop up stays, maybe right at the center of the page.</p>
  
  <p>Ok, I know I wasn't being clear enough. Let's see some examples.</p>
  
  <p>1)Coursera. If you ever took a course from Coursera(which you absolutely should), when you watch a video, the video will pop up. However, when you scroll down, the video will go up and even get out of your sight. This is NOT what I want.</p>
  
  <p>2)Pinterest. When you click a picture, a new window will pop up and you can notice the scroll bar status changed. It's no longer the one before the popup appear.</p>
  
  <p>Right now my popup has an absolute position style like this:</p>
  
  <pre><code>.popup{
  position: absolute;
  top: 40px;
  ...
  }
  </code></pre>
  
  <p>So how should I style the popup so I can achieve the goal? If anything isn't clear to me, please ask.</p>
  
  <p><strong>EDIT</strong>: It's great to make the popup fixed as these two answers do but is there a way to scroll according to the popup instead of the initial page? That means, if the popup need scroll to see the whole content, you can scroll, but if the popup is intact already you can't scroll at all, no matter the height of the initial page.</p>
  
  <p>So is there a way to make the scroll bars disappear when the popups pop up in the examples given by the answers below? </p>