利用JQuery的ColorBox实现PopUp的功能

一个简单的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）

posted @ 2013-03-26 11:22  Eric Sun  阅读(1274)  评论(0)    收藏  举报