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

如何在mvc3中显示PopUP窗口时限制页面的功能？

1 个答案: