简单的弹出层

 1 <link href="~/Content/pop.css" rel="stylesheet" />
 2 <script src="~/Scripts/jquery-1.8.2.js"></script>
 3 <script src="~/Scripts/poplayout.js"></script>
 4 <script type="text/javascript">
 5     $(function(){
 6         PopLayout.Init();   /*初始化*/
 7   
 8         $("#btn_pop").click(function () {   /*点击按钮，弹出层*/
 9             PopLayout.Pop("/UploadFiles/Desert.jpg");
10         });
11     })
12 
13     
14 </script>
15 
16 <input id="btn_pop" type="button" value="点击弹出层" />
17 <!--弹出层时背景层DIV-->
18 <div id="fade" class="black_overlay"></div>
19 <div id="div_pop" class="white_content">
20     <img id="img_pop" />
21 </div>

View Code

/***********************************pop.css************************************/ 
/*弹出层背景*/
.black_overlay 
{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
}

/*弹出层内容*/
.white_content 
{
    display: none;
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 1002;
    overflow: auto;
}

View Code

/***********************************poplayout.js***********************************/
/*弹出层【弹出图片】*/
var PopLayout = {
    /*初始化*/
    Init: function () {
        PopLayout.Close();
    },
    /*弹出隐藏层*/
    Pop: function (src) {

        $("#div_pop").css("display", "block");
        $("#fade").css("display", "block");
        $("#fade").width($(document).width());
        $("#fade").height($(document).height());

        $("#img_pop").attr("src", src);   //设置图片的路径
    },
    /*隐藏弹出层*/
    Close: function () {

        $("#fade").click(function () {
            $("#div_pop").css("display", "none");
            $("#fade").css("display", "none");
        });
    }
}

View Code