<style>

        #black_background_for_lightbox{

            display: none;

            position: absolute;

            top: 0%;

            left: 0%;

            width: 100%;

            height: 100%;

            background-color: black;

            z-index:1001;

            -moz-opacity: 0.8;

            opacity:.80;

            filter: alpha(opacity=80);

        }

        #light_box{

            display: none;

            position: absolute;

            top: 25%;

            left: 25%;

            width: 50%;

            height: 50%;

            padding: 16px;

            border: 16px solid orange;

            background-color: white;

            z-index:1002;

            overflow: auto;

        }

          .lightbox_close_button {

      font-size: small; font-weight: bold;

      float: right; color: #666;

      display: block; text-decoration: none;

      border: 2px solid #666;

      padding: 0px 3px 0px 3px;

      margin: 3px;

          }

    </style>

    <script>   

function width(){

  return(window.innerWidth)?

  window.innerWidth:

  document.documentElement.clientWidth||document.body.clientWidth||0;

}

function height(){

  return(window.innerHeight)?

  window.innerHeight:

  document.documentElement.clientHeight||document.body.clientHeight||0;

}

function open_lightbox(divid){

    div_to_be_shown = document.getElementById(divid); 

    var content = div_to_be_shown.innerHTML;

    document.getElementById('light_box').innerHTML  = '<span class="lightbox_close_button" onclick = "close_lightbox();">X</span> <p style="font-weight: bold;">'+ div_to_be_shown.title + '</p>'+content;

    document.getElementById('light_box').style.display='block';

    document.getElementById('light_box').style.top = ( window.pageYOffset + ( height() * 0.25 ) )+'px' ;

    document.getElementById('black_background_for_lightbox').style.top = window.pageYOffset+'px' ;

    document.getElementById('black_background_for_lightbox').style.display='block';

}

function close_lightbox(){

    document.getElementById('light_box').style.display='none';

    document.getElementById('black_background_for_lightbox').style.display='none';

}

    </script>  

​

<div>

  <a href="javascript:;" onclick="open_lightbox('content_to_be_shown')">Show Popup</a>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    Scroll Down<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    Scroll Down.<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    Scroll Down.<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    Scroll Down.<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    Scroll Down.<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    <a href="javascript:;" onclick="open_lightbox('content_to_be_shown')">Show Popup</a>.And continue scrolling down.<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    Scroll Down<br/>

  |<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    Scroll Down<br/>

  |<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    Scroll Down<br/>

  |<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    Scroll Down<br/>

  |<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    Scroll Down<br/>

  |<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    Scroll Down<br/>

  |<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    Scroll Down<br/>

  |<br/>

    |<br/>

    |<br/>

    |<br/>

    |<br/>

    <a href="javascript:;" onclick="open_lightbox('content_to_be_shown')">Show Popup here too</a>.

</div>

<div id="content_to_be_shown" title="The text of lorem ipsum" style="display: none;">  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elit erat, <br />

auctor ac iaculis eu, eleifend et mi. Pellentesque eleifend pulvinar justo, nec <br />

ullamcorper massa hendrerit in. Vivamus convallis ante et nisi sagittis at tempor<br />

 leo pellentesque. Nam eleifend accumsan condimentum. Sed tincidunt tempus lacinia.<br />

 Cras id mi eu nunc posuere pharetra. In a suscipit risus. Quisque lacinia nisi <br />

lectus. Fusce mattis purus ut felis tincidunt accumsan. Cras vitae nisl quis mauris<br />

 laoreet malesuada. Ut interdum lacus eu dolor ultricies venenatis. In sagittis <br />

consectetur nulla id porta. Nulla libero elit, ultricies ut sodales et, dapibus a sem.

</div>

        <div id="light_box"></div>

        <div id="black_background_for_lightbox"></div>