Question

in which I have a link when user clicks on that a popup window will appear…the actual thing of the popup window is the background of the page shouldn’t work when the popup window appears on the screen I don’t know where am i doing wrong but…my background functionalities are working when the popup window opens can any one correct me here

here is my css of my popup window

            div#fancy_overlay {
           position:absolute;
           top: 0;
           left: 0;
           z-index: 90;
            width: 100%;
            background-color: #333;
                 }

        div#fancy_loading {
position: absolute;
height: 40px;
width: 40px;
cursor: pointer;
display: none;
overflow: hidden;
background: transparent;
z-index: 100;
          }

      div#fancy_loading div {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 480px;
background: transparent url(fancy_progress.png) no-repeat;
      }

      div#fancy_close {
position: absolute;
top: -12px;
right: -12px;
height: 30px;
width: 30px;
background: transparent url(fancy_closebox.png) ;
cursor: pointer;
z-index: 100;
display: none;
      }

    div#fancy_content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0; 
margin: 0;
z-index: 96;
     }

   #fancy_frame {
position: relative;
width: 100%;
height: 100%;
display: none;
    }

    img#fancy_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0; 
padding: 0; 
margin: 0;
z-index: 92;
      }

    div#fancy_title {
position: absolute;
bottom: -35px;
left: 0;
width: 100%;
z-index: 100;
display: none;
     }

    div#fancy_title table {
margin: 0 auto;
     }

    div#fancy_title div {
color: #FFF;
font: bold 12px Arial;
padding-bottom: 2px;
    }

     td#fancy_title_left {
height: 32px;
width: 15px;
background: transparent url(fancy_title_left.png) repeat-x;
      }

    td#fancy_title_main {
height: 32px;
background: transparent url(fancy_title_main.png) repeat-x;
     }

    td#fancy_title_right {
height: 32px;
width: 15px;
background: transparent url(fancy_title_right.png) repeat-x;
     }

     div#fancy_outer {
position: absolute;
top: 0;
left: 0;
z-index: 90;
padding: 18px 18px 58px 18px;
margin: 0;
overflow: hidden;
background: transparent;
display: none;
  }

    div#fancy_inner {
position: relative;
width:100%;
height:80%;
border: 1px solid #444;
margin:75px 0 0 0;
     box-shadow: 5px 5px 5px #333;
     opacity:0.95;
     filter:alpha(opacity=80); /* For IE8 and earlier */
     }

   a#fancy_left, a#fancy_right {
position: absolute; 
bottom: 10px; 
height: 100%; 
width: 35%; 
cursor: pointer;
background-image: url(data:image/gif;base64,AAAA);
z-index: 100; 
     }

     a#fancy_left {
left: 0px; 
     }

     a#fancy_right {
right: 0px; 
     }

     a#fancy_left:hover {
background: transparent url(fancy_left.gif) no-repeat 0% 100%;
      }

    a#fancy_right:hover {
background: transparent url(fancy_right.gif) no-repeat 100% 100%;
     }

     #fancy_bigIframe, #fancy_freeIframe {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
     }

     div#fancy_bg {
display: none;
      }

       div.fancy_bg {
position: absolute;
display: block;
z-index: 70;
     }

    div.fancy_bg_n {
top: -18px;
width: 100%;
height: 18px;
background: transparent url(fancy_shadow_n.png) repeat-x;
     }

     div.fancy_bg_ne {
top: -18px;
right: -13px;
width: 13px;
height: 18px;
background: transparent url(fancy_shadow_ne.png) no-repeat;
    }

    div.fancy_bg_e {
right: -13px;
height: 100%;
width: 13px;
background: transparent url(fancy_shadow_e.png) repeat-y;
    }

     div.fancy_bg_se {
bottom: -18px;
right: -13px;
width: 13px;
height: 18px;
background: transparent url(fancy_shadow_se.png) no-repeat;
    }

    div.fancy_bg_s {
bottom: -18px;
width: 100%;
height: 18px;
background: transparent url(fancy_shadow_s.png) repeat-x;
       }

    div.fancy_bg_sw {
bottom: -18px;
left: -13px;
width: 13px;
height: 18px;
background: transparent url(fancy_shadow_sw.png) no-repeat;
    }

    div.fancy_bg_w {
left: -13px;
height: 100%;
width: 13px;
background: transparent url(fancy_shadow_w.png) repeat-y;
     }

    div.fancy_bg_nw {
top: -18px;
left: -13px;
width: 13px;
height: 18px;
background: transparent url(fancy_shadow_nw.png) no-repeat;
     }

here is my JS

 <script type="text/javascript">
   $(document).ready(function () {
    $(".fancybox").fancybox();
   });
</script>

Answer 1

Make the overlay modal.
Use $(".fancybox").fancybox({modal: true});