精致的JS提示

他是一個用戶自定義控件；

他只有1174個字節；

他能兼容任何瀏覽器；

他彈出來是如此的優雅，隱藏是那么自然；

他是如此的精致，絕對沒有任何性能影響；

最重要的是他是陳太漢開發的；

文件名：TipControl.ascx

<%@ Control Language="C#"%>
<div id="divTip" style="width:300px;height:100px;position:absolute;top:240px;font-size:15px; border:#c60000 thin solid;display:none;" runat="server">
     <div style=" background-color:#c60000; height:20px;">
         <div style="margin-left:3px;color:White;font-weight:bold">溫馨提示</div>
     </div>
     <div style="margin-top:23px;text-align:center;"><asp:Label ID="lbContent" runat="server"/></div>
</div>
<script language="javascript" type="text/javascript">
    function ShowTip(tip) {
        parent.document.documentElement.scrollTop = parent.document.documentElement.scrollHeight;//滾動條置頂
        document.getElementById("<%=divTip.ClientID%>").style.display = "block";
        document.getElementById("<%=divTip.ClientID%>").style.left = (document.body.scrollWidth - 300) / 2 + "px";
        document.getElementById("<%=divTip.ClientID%>").style.top = parent.document.documentElement.scrollHeight/2-100 + "px";
        document.getElementById("<%=lbContent.ClientID%>").innerHTML = tip;
        setTimeout("document.getElementById('<%=divTip.ClientID%>').style.display = 'none'", 3000);
    }
</script>

測試頁面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestJS.aspx.cs" Inherits="JQueryTest.TestJS" %>
<%@ Register Src="~/UserControl/TipControl.ascx" TagName="uc" TagPrefix="ua" %>
<!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>
     <script type="text/javascript" src="js/jquery.tools.min.js"></script>
     
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <ua:uc runat="server" ID="fdfdf" />
      <input type="button" value="測試" onclick="ShowTip('陳太漢提示您,有消息');"
     </div>
    </form>
</body>
</html>

posted @ 2011-04-28 17:54 古文觀芷閱讀(605) 評論(1) 收藏舉報

刷新頁面返回頂部

精致的JS提示

公告