Comment restreindre la fonctionnalité de la page lors de l'affichage d'une fenêtre PopUP dans mvc3?

Question

dans lequel j'ai un lien lorsque l'utilisateur clique sur qu'une fenêtre apparaîtra ... la chose réelle de la fenêtre contextuelle est l'arrière-plan de la page ne devrait pas fonctionner lorsque la fenêtre apparaît sur l'écran je ne sais pas où que je fais mal, mais ... mes funcionalites de fond travaillons lorsque la fenêtre ouvre peut me corriger

voici mon css de ma fenêtre pop-up

  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; 
    } 

voici mon JS

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

Answer 1

Faire le chevauchement Oui modal. Utiliser $(".fancybox").fancybox({modal: true});