<%@ 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> <script src="tc.js"></script> <title></title> <style type="text/css"> </style> </head> <body> <form id="form1" runat="server"> <input type="button" value="弹出" id="btn1" /> <%--<div id="tc" style="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;"> <div id="tc-top" style=" 100%; height:30px; background-color:navy; color:white; font-size:18px; font-weight:bold; text-align:center; line-height:30px; border-radius:10px 11px;">这里是标题</div> <div id="tc-main" style=" padding:20px; text-align:center; background-color:white;">这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！这里是内容,可能有好多字啊！！</div> <div id="tc-bottom" style="position:relative; 100%; height:40px;"> <div onclick="tcbtn1();" id="tc-btn1" style=" 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;font-weight:bold;">确定</div> </div> </div> <div id="tc-zz" style=" position:fixed; top:0px; left:0px; 100%; height:100%; background-color:black; opacity:0.3; display:none; z-index:10;"></div>--%> </form> </body> </html> <script type="text/javascript"> $("#btn1").click(function () { myalert('我是小倩','小倩：你好！！'); }); </script>
function myalert(t, c) { var tcstr = " <div id="tc" style="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;">"; tcstr +=" <div id="tc-top" style=" 100%;height:30px; background-color:navy;color:white; font-size:18px; font-weight:bold;text-align:center;line-height:30px; border-radius:10px 11px;">"; tcstr +=t; //这里是标题 tcstr +="</div><div id="tc-main" style=" padding:20px;text-align:center;background-color:white;">"; tcstr +=c; tcstr +=" </div><div id="tc-bottom" style="position:relative;100%; height:40px;">"; tcstr +=" <div onclick="tcbtn1();" id="tc-btn1" style=" 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;font-weight:bold;"> 确定</div></div></div>"; tcstr +="<div id="tc-zz" style=" position:fixed;top:0px;left:0px;100%;height:100%; background-color:black;opacity:0.3; display:none; z-index:10;"></div>"; $(document.body).append(tcstr); $("#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"); } function tcbtn1() { $("#tc").animate({ top: "110" }, 200).animate({ top: "-500" }, 500, function () { $("#tc-zz").css("display", "none"); $("#tc").remove(); $("#tc-zz").remove(); }); }