精致的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>
复制代码
目录
相关文章
|
9月前
|
移动开发 JavaScript 前端开发
分享92个JS相册效果JS代码,总有一款适合你
分享92个JS相册效果JS代码,总有一款适合你
264 0
|
JavaScript 前端开发
js:富文本编辑器实现@某人
js:富文本编辑器实现@某人
356 0
js:富文本编辑器实现@某人
|
5月前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
5月前
|
JavaScript
分享一款520表白节JS代码
今天给大家分享一款JS表白源码 js会随 随机颜色心形跟随鼠标互动520表白节女神表白利器! 修改的话就搜索:LOVEh 就能找到这个英文了。
26 0
|
6月前
|
JSON JavaScript 前端开发
JS三级联动功能制作
JS三级联动功能制作
40 0
|
9月前
|
移动开发 JavaScript 前端开发
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您
148 0
|
9月前
|
JavaScript
js详细讲解放大镜的实现
js详细讲解放大镜的实现
|
JavaScript 算法 前端开发
连连看html游戏全代码js、jquery操作
连连看html游戏全代码js、jquery操作
274 0
连连看html游戏全代码js、jquery操作
|
移动开发 JavaScript 前端开发
飞机大战html游戏全代码js、jquery操作
飞机大战html游戏全代码js、jquery操作
204 0
飞机大战html游戏全代码js、jquery操作
|
移动开发 前端开发 JavaScript