简单的弹出层

<link href="~/Content/pop.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/poplayout.js"></script>
<script type="text/javascript">
    $(function(){
        PopLayout.Init();   /*初始化*/
  
        $("#btn_pop").click(function () {   /*点击按钮，弹出层*/
            PopLayout.Pop("/UploadFiles/Desert.jpg");
        });
    })

    
</script>

<input id="btn_pop" type="button" value="点击弹出层" />
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay"></div>
<div id="div_pop" class="white_content">
    <img id="img_pop" />
</div>

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

/***********************************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");
        });
    }
}