Question

ASP.NET弹出层

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

Answer 1

楼上那个没试过，不过看到$ 符号。哎。弹出层没那么复杂吧 function showdiv() {
document.getElementById("div1").style.display = "block"; } <img src="1.gif" onclick="showdiv()"/>
<div id="div1" style="display:none">
测试
</div>先固定好层的位置，然后可以通过后台动态加载你选中的那个图片的ID去显示

Answer 2

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