一个简单的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" οnclick="$.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)