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