javascript - mvc3 で PopUP ウィンドウを表示するときにページの機能を制限するにはどうすればよいですか?

Question

ユーザーがクリックするとポップアップウィンドウが表示されるリンクがあります...ポップアップウィンドウの実際の内容は、ポップアップウィンドウが画面に表示されたときにページの背景が機能しないことですどこにあるのかわかりません私は間違っていますが...ポップアップウィンドウが開いたときにバックグラウンド機能が機能しています。誰かここで私を修正できますか

ここに私のポップアップウィンドウのCSSがあります

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

ここに私のJSがあります

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

Answer 1

オーバーレイをモーダルにします。使用する$(".fancybox").fancybox({modal: true});