1. $(document).ready(
2. 
   
3. function(){
4. //open popup
5. $(document).on("click", ".pop", function(){
6. 
   
7. var url = $(this).attr('name');
8. 
   
9.  $("#"+url).fadeIn(1000);
10.  positionPopup(this);
11. });
12. 
    
13. //close popup
14. $(document).on("click", ".close", function(){
15. 
    
16.   var url = $(this).attr('name');
17. 
    
18. 
    
19. $("#"+url).fadeOut(500);
20. });
21. });
22. 
    
23. //position the popup at the center of the page
24. function positionPopup(element){
25. 
    
26.   var url = $(element).attr('name');
27. 
    
28. 
    
29.   if(!$("#"+url).is(':visible')){
30. 
    
31.     return;
32.   } 
33. 
    
34. 
    
35. 
    
36.   $("#"+url).css({
37.       left: ($(window).width() - $('#'+url).width()) / 2,
38.       top: ($(window).width() - $('#'+url).width()) / 7,
39.       position:'absolute'
40.   });
41. 
    
42. 
    
43. }
44. 
    
45. 
    
46. //maintain the popup at center of the page when browser resized
47. $(window).bind('resize',positionPopup);
48. 
    
49. </script>
50. <style>
51. .overlay_form{
52.     position: absolute;
53.     border: 0px solid gray;
54.     padding: 0px;
55.     background: ;
56.     width: 400px;
57.     height: 500px;
58. }
59. .pop{
60.     display: inline;
61.     border: 0px solid gray;
62.     width: 65px;
63.     text-align: center;
64.     padding: 6px;
65.     border-radius: 5px;
66.     text-decoration: none;
67.     margin: 0 auto;
68. }
69. </style>

1.                 <nobr><a href='#'  id="pop" class="pop" name='<?='overlay_form'.$j?>'  ><?=get_bc_branch_name($det['branch_id'])?></a></nobr>
2. 
   
3.                 <div class="overlay_form" id='<?="overlay_form".$j?>' style="display:none">
4. 
   
5.                     <?
6.                       $_GET['b_id']=$det['branch_id'];
7.                       include('bc_branch_profile.php');
8.                      ?>
9.                 </div>