ASP.NET弹出层

我在做个ASP的网站相册，想实现：
  在图片单击，然后就弹出一个层，上面只放一个Image控件用来显示选中的图片。求弹出层的代码

追问：哥。层的位置要怎么固定呢？

答案：楼上那个没试过，不过看到$ 符号。哎。弹出层没那么复杂吧
 function showdiv() {
         document.getElementById("div1").style.display = "block"; 
     }
 <img  src="1.gif" onclick="showdiv()"/>
    <div id="div1" style="display:none">
    测试      
    </div>
先固定好层的位置，然后可以通过后台动态加载你选中的那个图片的ID去显示
 
function showbox(content,width,height,cssName) {
    var show = true;
    if(show == true) {
        var tips_html = new String;
            tips_html = "<div id=\"tips_bg\" class=\"tips_bg\" style=\"height:"+$(document).height()+"px;;filter:alpha(opacity=0);opacity:0;z-index: 999901\"><iframe style=\"width:100%;height:100%;border:none;filter:alpha(opacity=0);opacity:0;\"></iframe></div>";
            tips_html += "<div id=\"tips_box\" class=\"tips_box\">";
            tips_html += "<div id=\"tips_title\" class=\"tips_title\"><span class=\"tips_step\"></span><span id=\"tips_close\" class=\"tips_close\">关闭</span></div>";
            tips_html += "<div id=\"tips_content\" class=\"tips_content\"></div>"; 
            tips_html += "</div>";
            $("body").append(tips_html);
            show = false;
    }
    contentType = content.substring(0,content.indexOf(":"));
    content = content.substring(content.indexOf(":")+1,content.length);
    switch(contentType) {
        case "text":
        $("#tips_content").html(content);
        break;
        case "id":
        $("#tips_content").html($("#"+content+"").html());
        break;
        case "url":
        var content_array=content.split("?");
        $("#tips_content").ajaxStart(function(){
            $(this).html("<p class='tips_loading'><img src=\"images/loading.gif\" />加载数据中...</p>");
        });
        $.ajax({
            type:content_array[0],
            url:content_array[1],
            data:content_array[2],
            error:function(){
                $("#tips_content").html("<p class='tips_error'>加载数据出错...</p>");
            },
            success:function(html){

                $("#tips_content").html(html);
            }
        });
        case "iframe":
        $("#windown-content").ajaxStart(function(){
            $(this).html("<img src='"+templateSrc+"/images/loading.gif' class='loading' />");
        });
        $.ajax({
            error:function(){
                $("#windown-content").html("<p class='windown-error'>加载数据出错...</p>");
            },
            success:function(html){
                $("#windown-content").html("<iframe src=\""+content+"\" width=\"100%\" height=\""+parseInt(height)+"px"+"\" scrolling=\"auto\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");
            }
        });

    }
    $("#tips_bg").animate({opacity:"0.3"},"normal");
    $("#tips_box").show().attr("class","tips_"+cssName);;
    $("#tips_close").click(function() {
        $("#tips_bg").remove();
        $("#tips_box").remove();
    });
    $(document).keydown(function(e) {
        e = e || event;
        if(e.keyCode == 27) $("#tips_close").trigger('click');
    });
    $("#tips_content").css({width:width+"px",height:(height-($("#tips_title").height()))+"px"});
    var est = document.documentElement.scrollTop;
        ch = document.documentElement.clientHeight;
    var iev = $.browser.version;
    if (iev == 6.0) {
        $("#tips_box").css({width:width+"px",height:height+"px",left:"50%",top:(parseInt((ch)/2)+est)+"px",marginTop: -((parseInt(height))/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
    }else {
        $("#tips_box").css({width:width+"px",height:height+"px",left:"50%",top:"50%",marginTop:-(parseInt(height/2))+"px",marginLeft:-(parseInt(width/2))+"px",zIndex: "999999"});
    };
};
///////////////////////上面是JS代码，样式在下面//////////////////////
@charset "utf-8";
/*tipsinfo style*/
#tips_bg {position: absolute;width: 100%;height: 100%;background: #000;top: 0;left: 0;}
#tips_box {position: fixed;_position: absolute;text-align: left; background:#fff; border:1px solid #999;}
.tips_title {position: relative;height:20px;z-index:99903;}
.tips_close{position:absolute;right:2px;top:2px;background:url(ico_colse.gif) no-repeat;width:16px;height:16px;cursor:pointer;text-indent:-10em; overflow: hidden;}
.tips_content {position: relative;overflow: auto;text-align: left;z-index:99902;background:#fff;}
.tips_content li { width: 260px; line-height:22px; background:url(ico_li.gif) left center no-repeat;padding-left:16px;}
.tips_loading {position: absolute;left: 50%;top: 50%;margin-left: -38px;margin-top: -38px;}

上一个：ASP.NET获取时间
下一个：asp.net服务器问题