<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="js/jquery-1.7.1.min.js"></script> <title></title> <style type="text/css"> #tc {position:fixed; 400px; left:50%; margin-left:-200px; top:-500px; border:1px solid navy; box-shadow:0 0 10px #808080; border-radius:10px 11px; z-index:11; } #tc-top { 100%; height:30px; background-color:navy; color:white; font-size:18px; font-weight:bold; text-align:center; line-height:30px; border-radius:10px 11px; } #tc-bottom { position:relative; 100%; height:40px; } #tc-btn1 { position:absolute; 100px; height:30px; top:5px; background-color:navy; color:white; text-align:center; line-height:30px; cursor:pointer; left:50%; margin-left:-50px; } #tc-btn1:hover { background-color:red; color:green; } #tc-main { padding:20px; text-align:center; background-color:white; } #tc-zz { position:fixed; top:0px; left:0px; 100%; height:100%; background-color:black; opacity:0.3; display:none; z-index:10; } </style> </head> <body> <form id="form1" runat="server"> <input type="button" value="弹出" id="btn1"/> <div id="tc"> <div id="tc-top">这里是标题</div> <div id="tc-main">这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！</div> <div id="tc-bottom"> <div id="tc-btn1">确定</div> </div> </div> <div id="tc-zz"></div> </form> </body> </html> <script type="text/javascript"> $("#btn1").click(function () { myalert('我是小倩','小倩：你好！！'); }); function myalert(t, c) { $("#tc-top").text(t); $("#tc-main").html(c); $("#tc").animate({ top: "100" }, 500).animate({ top: "90" }, 100).animate({ top: "100" }, 300); $("#tc-zz").css("display", "block"); } $("#tc-btn1").click(function () { $("#tc").animate({ top: "110" }, 200).animate({ top: "-500" }, 500, function () { $("#tc-zz").css("display", "none"); }); }); </script>