代码不算是很复杂，但是实现的交互效果很好，可以自定义弹出div里面的内容。
Default.aspx前台页面代码：（后台页面类代码无需修改）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>jQuery弹出层</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
<script language="javascript" type="text/javascript">
showdiv=function(){
dialog("jquery弹出层","content","300px","auto","id");
}
</script>
<style type="text/css">
.cc{color:#FF0000}
#floatBoxBg{display:none;width:100%;height:auto;background:#000;position:absolute;top:0;left:0;}
.floatBox{border:#666 5px solid;width:300px;position:absolute;top:50px;left:40%;}
.floatBox .title{height:23px;padding:7px 10px 0;background:#333;color:#fff;}
.floatBox .title h4{float:left;padding:0;margin:0;font-size:14px;line-height:16px;}
.floatBox .title span{float:right;cursor:pointer;}
.floatBox .content{ height:auto; padding:20px 15px;background:#fff; color:#000000}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="content" visible="false" style="visibility:hidden">测试如果在调用弹出层方法dialog()，的时候，如果传递的type为id,则将id为content的标签中的内容填充到弹出的层中！</div>
</div>
<input id="Button2" type="button" value="button" οnclick="showdiv()" />
</form>
</body>
</html>
dialog.js代码：
// Lee dialog 1.0 http://www.xij.cn/blog/?p=68
var dialogFirst=true;
function dialog(title,content,width,height,Type){
if(dialogFirst==true){
var temp_float=new String;
temp_float="<div id=/"floatBoxBg/" style=/"height:"+$(document).height()+"px;filter:alpha(opacity=0);opacity:0;/"></div>";
temp_float+="<div id=/"floatBox/" class=/"floatBox/">";
temp_float+="<div class=/"title/"><h4></h4><span>鍏抽棴</span></div>";
temp_float+="<div class=/"content/"></div>";
temp_float+="</div>";
$("body").append(temp_float);
dialogFirst=false;
}
$("#floatBox .title span").click(function(){
$("#floatBoxBg").animate({opacity:"0"},"normal",function(){$(this).hide();});
$("#floatBox").animate({top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px"},"normal",function(){$(this).hide();});
});
$("#floatBox .title h4").html(title);
contentType=content.substring(0,content.indexOf(":"));
content=content.substring(content.indexOf(":")+1,content.length);
switch(Type){
case "url":
var content_array=content.split("?");
$("#floatBox .content").ajaxStart(function(){
$(this).html("loading...");
});
$.ajax({
type:content_array[0],
url:content_array[1],
data:content_array[2],
error:function(){
$("#floatBox .content").html("error...");
},
success:function(html){
$("#floatBox .content").html(html);
}
});
break;
case "text":
$("#floatBox .content").html(content);
break;
case "id":
$("#floatBox .content").html($("#"+content+"").html());
break;
case "iframe":
$("#floatBox .content").html("<iframe src=/""+content+"/" width=/"100%/" height=/""+(parseInt(height)-30)+"px"+"/" scrolling=/"auto/" frameborder=/"0/" marginheight=/"0/" marginwidth=/"0/"></iframe>");
}
$("#floatBoxBg").show();
$("#floatBoxBg").animate({opacity:"0.5"},"normal");
$("#floatBox").attr("class","floatBox "+Type);
$("#floatBox").css({display:"block",left:(($(document).width())/2-(parseInt(width)/2))+"px",top:($(document).scrollTop()-(height=="auto"?300:parseInt(height)))+"px",width:width,height:height});
$("#floatBox").animate({top:($(document).scrollTop()+50)+"px"},"normal");
}
9855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
