Display Details like lightBox

Display Details like lightBox

Dear Sir/Madam

pls refer


Green button
  Reminder List

we get popup and small div inside
This part is working the way I want 

however when we scroll down the dark background and the pop div also get scrolled.
I want their position fixed


html
  1. <!--- DIV with dark back ground -->
  2. <div class="popbg" id="mainbgdiv" >

  4. </div>
  5. <!--- DIV with Data  -->
  6. <div class="popdata" id="insidediv">

  8. </div>


css

  2. /*--------------------Center DIV--------------*/
  3. html,body{height:100%;}

  5. div.popbg{ /* backgroung-container*/
  6.     width:100%;
  7.     height:100%;
  8.     position:absolute;
  9.     background: rgba(0,0,0,.6);
  10.  
  11.     z-index: 999;
  12. display: none;
  13. }
  14. div.popdata{
  15.     width:50%;
  16.     height:50%;
  17.     color:white;
  18.     background:#e0e0e0;
  19.     border-radius: 10px;
  20.     text-align:center;
  21.     z-index:9999;
  22.     display:none;
  23. position:absolute;
  24. }


Jquery [ center DIV]
  1. //--------close pop ------------------------//
  2. $('#popclose').click(function() {   
  3. $('#insidediv').empty();
  4. $(".popbg").hide();
  5.      $('.popdata').hide();
  6.        });
  7. //--------------Center Div---------------//
  8. jQuery.fn.center = function(parent) {
  9.     if (parent) {
  10.         parent = this.parent();
  11.     } else {
  12.         parent = window;
  13.     }
  14.     this.css({
  15.         "position": "absolute",
  16.         "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
  17.         "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
  18.     });
  19. return this;
  20. }