alert弹出层(待完善……)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo._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>无标题页</title>

    <style type="text/css">

        .alert

        {

            background-color: lightgray;

            position: absolute;

            filter: Alpha(Opacity="50",FinishOpacity="75",2);

            z-index: 99;

            top: 0px;

            left: 0px;

        }

        .b

        {

            background-image: url("img/asyncbox_tipsbar_bg.gif");

        }

        .alertDiv

        {

            position: absolute;

        }

    </style>

    <script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <script src="js/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $("#btnAlert").live("click", function() {

                btnAlert("您确定要关闭吗?");

                $("#mav").find("a").andSelf().show().css("width", $(window).width())

                .css("height", $(document).height());

                $("#alertDiv").position(($(document).height() - $("#alertDiv").height()) / 2, ($(document).width() - $("#alertDiv").width()) / 2);

            });

        });

        function btnAlert(mes) {

            var divModel = "<div id='alertDiv' style=' 300px; margin: 0 auto;'><div style='background-color: Blue; height: 25px;'><div id='close' style='float: right; color: White; font-weight: bold; font-size: 13pt;' >  X </div>        </div>        <div style='height: 250px; background-color: lightGray'>        </div>    </div>";

            $("<div id='mav' class='alert'><div id='alertDiv'  style=' 300px; margin: 0 auto; margin-top:200px;' ><div style='background-color: Blue; height: 25px;'><div id='close' style='float: right; color: White; font-weight: bold; font-size: 13pt;' >X</div></div><div style='height: 250px; background-color: lightGray' class='b'> <div id='content' style='top: 0; height: 90%'></div><div style='bottom: 0; text-align: center;'><input id='btnOK' type='button' value='OK' /><input id='btnCancel' type='button' value='Cancel' /></div></div></div></div>")

             .appendTo($("body"));

            $("#close").live("click", function() {

                $(".alert").find("div").andSelf().remove();

                return false;

            });

            $("#content").html("<b>" + mes + "</b>");

            $("#btnOK").live("click", function() {

                $(".alert").find("div").andSelf().remove();

                return true;

            });

            $("#btnCancel").live("click", function() {

                $(".alert").find("div").andSelf().remove();

                return false;

            });

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

    </div>

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <%-- <Triggers>

            <asp:AsyncPostBackTrigger EventName="timer_Elapsed" ControlID="Button1" />

        </Triggers>--%>

        <ContentTemplate>

            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

        </ContentTemplate>

    </asp:UpdatePanel>

    <input id="btnAlert" type="button" value="btnAlert" />

    </form>

</body>

</html>

原文地址:https://www.cnblogs.com/wangsx/p/2176519.html