一个简单的demo如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ColorBoxPopUp.aspx.cs" Inherits="EricSunWebAppProject.ColorBoxPopUp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.0.min.js"></script>
<script src="Scripts/jquery.colorbox-min.js"></script>
<link href="colorbox.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="popup_btn" value="PopUp Button" />
<asp:HyperLink ID="PopUp_Link" runat="server">PopUp HyperLink</asp:HyperLink>
</div>
<div style="display:none">
<div id="popup_div1">
<h1>This is the PopUp1</h1>
<input type="button" value="Cancel" onclick="$.colorbox.close();" />
<input type="button" value="Save" />
</div>
</div>
<div style="display:none">
<div id="popup_div2">
<h1>This is the PopUp2</h1>
<asp:Button ID="CancelBtn" runat="server" Text="Cancel" OnClientClick="$.colorbox.close();" />
<input type="button" value="Save" />
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$("#popup_btn").colorbox({
scrolling: false,
inline: true,
href: "#popup_div1",
transition: "none",
opacity: 0.3,
onload: function () { $("#cboxClose").remove(); }
});
$("#<%=PopUp_Link.ClientID%>").colorbox({
scrolling: false,
inline: true,
href: "#popup_div2",
transition: "none",
opacity: 0.3,
onload: function () { $("#cboxClose").remove(); }
});
});
</script>
工程结构如下：
更多内容请看如下链接：
http://blog.csdn.net/houpengfei111/article/details/8001187
http://www.jacklmoore.com/colorbox/ （可以下载所需要的Js，Css文件以及对应的images）