javascript实现仿IE顶部的可关闭警告条

 　　仿windows IE顶部的敬告工具条，带关闭按钮，设计还算精美，你完全可以用到自己的网页用于显示提示等方面，有需要的小伙伴可以参考下。

　　功能非常实用，代码非常简单，就不多废话了，直接奉上：

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿IE顶部的警告条，可以关闭</title>
<style type="text/css">
#informationbar{
position: fixed;
left: 0;
width: 100%;
text-indent: 5px;
padding: 5px 0;
background-color: lightyellow;
border-bottom: 1px solid black;
font: bold 12px Verdana;
}
* html #informationbar{ /*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
</style>
<script type="text/javascript">
function informationbar(){
this.displayfreq="always"
this.content='<a href="javascript:informationbar.close()"><img src="close.gif" style="width: 14px; height: 14px; float: right; border: 0; margin-right: 5px"
 
/></a>'
}
informationbar.prototype.setContent=function(data){
this.content=this.content+data
document.write('<div id="informationbar" style="top: -500px">'+this.content+'</div>')
}
informationbar.prototype.animatetoview=function(){
var barinstance=this
if (parseInt(this.barref.style.top)<0){
this.barref.style.top=parseInt(this.barref.style.top)+5+"px"
setTimeout(function(){barinstance.animatetoview()}, 50)
}
else{
if (document.all && !window.XMLHttpRequest)
this.barref.style.setExpression("top", 'document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px" : body.scrollTop+"px"')
else
this.barref.style.top=0
}
}
informationbar.close=function(){
document.getElementById("informationbar").style.display="none"
if (this.displayfreq=="session")
document.cookie="infobarshown=1;path=/"
}
informationbar.prototype.setfrequency=function(type){
this.displayfreq=type
}
informationbar.prototype.initialize=function(){
if (this.displayfreq=="session" && document.cookie.indexOf("infobarshown")==-1 || this.displayfreq=="always"){
this.barref=document.getElementById("informationbar")
this.barheight=parseInt(this.barref.offsetHeight)
this.barref.style.top=this.barheight*(-1)+"px"
this.animatetoview()
}
}
window.onunload=function(){
this.barref=null
}
</script>
<script type="text/javascript">
<!--Invocation code-->
var infobar=new informationbar()
infobar.setContent('敬告：明天中午12点天降钱雨，请备好麻袋！ 　<a href="#">购买麻袋</a>　　<a href="#">购买麻袋</a>')
infobar.initialize()
</script>
</head>
<body>
</body>
</html>

　　以上所述就是本文的全部内容了，希望大家能够喜欢。

时间： 2024-11-03 15:28:28

javascript实现仿IE顶部的可关闭警告条的相关文章

javascript实现仿IE顶部的可关闭警告条_javascript技巧

功能非常实用,代码非常简单,就不多废话了,直接奉上: <!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> <met

JavaScript实现仿网易通行证表单验证

  这篇文章主要介绍了JavaScript实现仿网易通行证表单验证,十分的实用,有需要的小伙伴可以参考下. 介绍一下表单验证,不错哦: 如图 CSS代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

javascript实现仿腾讯游戏选择

  这篇文章主要介绍了javascript实现仿腾讯游戏选择,简单实现的下拉菜单二级联动效果,十分不错,有需要的小伙伴可以参考下. 到我们玩腾讯游戏的时候,会有很多选择,比如选择什么区,什么人物等.下面简单制作腾讯游戏选择. 计算器"> ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

JavaScript检测弹出窗口是否已经关闭的方法

 这篇文章主要介绍了JavaScript检测弹出窗口是否已经关闭的方法,涉及javascript中window属性的closed属性的使用技巧,需要的朋友可以参考下     本文实例讲述了JavaScript检测弹出窗口是否已经关闭的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: var win = window.open('foo.html','windowName',"width=200,height=200,scrollbars=no"); var timer = s

asp.net- VS报错：javascript 语言服务遇到错误且已关闭

问题描述 VS报错:javascript 语言服务遇到错误且已关闭 vs2013安装developer assistant插件后,在aspx页面写js脚本就提示如下错误,大家遇到类似问题吗? 解决方案 遇到过,,,,把那个插件卸载后重新安装后就可以了,,,,,,,,, 解决方案二: 估计是那个插件的问题吧,,

JavaScript检测弹出窗口是否已经关闭的方法_javascript技巧

本文实例讲述了JavaScript检测弹出窗口是否已经关闭的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: var win = window.open('foo.html','windowName',"width=200,height=200,scrollbars=no"); var timer = setInterval(function() {       if(win.closed) {          clearInterval(timer);     

JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码_javascript技巧

JavaScript实现仿新浪微博大厅和未登录腾讯微博首页滚动效果,貌似这些天有不少朋友需要这功能,前几天已经发了几个了,不过那一个效果是用jquery实现的<jQuery向上循环滚动(仿新浪微博未登录首页滚动微博显示)>,今天发现这款是js制作的好,不敢独享,希望需要的朋友喜欢哦. 效果图展示如下: 查看演示         源码下载 html代码 <div class="wp"> <ul id="slider" class=&quo

Android仿泡泡窗实现下拉菜单条实例代码

功能描述:点击下拉按钮,显示出所有的条目,有删除和点击功能,点击后将条目显示. 注意:泡泡窗默认是没有焦点的.要让泡泡窗获取到焦点.假如listview的item中有Button,ImageButton,CheckBox等会强制获取焦点的view 此时,listview的item无法获取焦点,从而无法被点击 解决方法:给item的根布局增加以下属性 Android:descendantFocusability="blocksDescendants"设置之后,Button获取焦点,ite

iphone-通过编码实现关闭警告

问题描述 通过编码实现关闭警告 得到的警告: UIAlertView *connectionError = [[UIAlertView alloc] initWithTitle:@"Error" message:@"Connection Failed" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil]; 我想知道能不能编程关闭打开特定事件时的警告视图.我知道没有特定