js实现仿qq消息的弹出窗效果
在我们的日常开发中，或者生活中，经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗，分享给大家供大家参考，具体内容如下
运行效果截图：
直接贴代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>javaScript实现网页右下角弹出窗口代码</title>
</head>
<body>
<script type="text/javascript">
var ShowMsg={
title:'提示',
content:'模拟qq弹出框消息提醒',
width:'300px',
height:'100px',
setTitle:function(value){
this.title=value;
},
setContent:function(value){
this.content=value;
},
getTitle:function(){
return this.title;
},
getContent:function(){
return this.content;
},
show:function(){
//弹窗div
var _winPopDiv = document.createElement('div');
_winPopDiv.id="_winPopDiv";
_winPopDiv.style.cssText = 'width:300px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:block;';
//消息标题div
var _titleDiv= document.createElement('div');
_titleDiv.id="_titleDiv";
_titleDiv.innerHTML=this.getTitle();
_titleDiv.style.cssText = 'width:100%; height:22px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:left; font-size:14px;';
_winPopDiv.appendChild(_titleDiv);
//关闭消息按钮span
var _closeSpan= document.createElement('span');
_closeSpan.id="_closeSpan";
_closeSpan.innerHTML="X";
_closeSpan.style.cssText = 'position:absolute; right:4px; top:-1px; color:#FFF; cursor:pointer;font-size:14px;';
_titleDiv.appendChild(_closeSpan);
//内容div
var _conDiv= document.createElement('div');
_conDiv.id="_conDiv";
_conDiv.style.cssText = 'width:100%; height:110px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center;';
_conDiv.innerHTML=this.getContent();
_winPopDiv.appendChild(_conDiv);
document.body.appendChild(_winPopDiv);
//关闭span绑定事件
var closeDiv = document.getElementById("_closeSpan");
if(closeDiv.addEventListener){
closeDiv.addEventListener("click",function(e){
if (window.event != undefined) {
window.event.cancelBubble = true;
} else if (e.stopPropagation) {
e.stopPropagation();
}
document.getElementById('_winPopDiv').style.cssText="display:none;";
},false);
}else if(closeDiv.attachEvent){
closeDiv.attachEvent("onclick",function(e){
if (window.event != undefined) {
window.event.cancelBubble = true;
} else if (e.stopPropagation) {
e.stopPropagation();
}
document.getElementById('_winPopDiv').style.cssText="display:none;";
});
}
}
};
ShowMsg.show();
</script>
</body>
</html>
希望本文所述对大家学习javascript程序设计有所帮助。
相关推荐
-
JS实现的仿QQ空间图片弹出效果代码
本文实例讲述了JS实现的仿QQ空间图片弹出效果代码.分享给大家供大家参考,具体如下: <script type="text/javascript"> function imageShow(which_click) { var image_path = which_click; //alert(image_path); var tag_top = Math.max(document.documentElement.scrollTop, document.body.scroll
-
JS实现仿QQ聊天窗口抖动特效
JS实现仿QQ聊天窗口抖动特效 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript层抖动效果</title> <style type="text/css"> #body{text-align:center;} #test{w
-
JS实现的模仿QQ头像资料卡显示与隐藏效果
本文实例讲述了JS实现的模仿QQ头像资料卡显示与隐藏效果.分享给大家供大家参考,具体如下: 我们使用QQ时经常需要查看朋友的资料卡,当我们把鼠标移入头像时,资料卡显示,并且鼠标能在头像与资料卡之间能随意移动,当鼠标移出头像或资料卡时,资料卡延时隐藏. 实质就是延时提示框问题! 首先写好布局: <style> div { float:left; margin:5px; } .head { width:50px;height:50px;background-color:pink; } .info
-
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
调用方式 :ImageView(index,imgData) --index参数 为图片默认显示的索引值,类型 为Number --imaData参数 为图片url数组 ,类型为Array 使用之前要先引入 zepto.js 文件 ImageView.js具体代码如下: 复制代码 代码如下: /* * ImageView v1.0.0 * --基于zepto.js的大图查看 * --调用方法 ImageView(index,imgDada) * --index 图片默认值显示索引,N
-
js设置控件的隐藏与显示的两种方法
用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的"display"和"visibility"属性. 当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见.不同的是"display"
-
原生JS仿QQ阅读点击展开、收起效果
使用JS技术实现QQ阅读类似的点击展开.收起效果,具体内容如下 一.定义展开函数showdiv(),实现点击"全文"按钮,全文展开. 1.点击展开函数,需要将触发点击事件的按钮作为参数传入 2.通过传入的按钮,查找其父元素,将其父元素设置为隐藏. 3.将紧跟其父元素之后的元素设置为显示. 二.定义收起函数hidediv(),实现点击"收起全文"按钮,全文内容隐藏. 1.点击收起函数,需要将触发点击事件的按钮作为参数传入 2.通过传入的按钮,查找其父元素,将其父元素设
-
js菜单点击显示或隐藏效果的简单实例
复制代码 代码如下: <!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="
-
javascript 控制 html元素 显示/隐藏实现代码
1.编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} function $(s){return document.getElementById(s);} </script> 2. 要显示/隐藏的html元素加上 id
-
纯js实现仿QQ邮箱弹出确认框
代码非常简单,这里就不多废话了. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <TITLE>QQ邮箱的弹出层</TITLE> <meta http-equiv="Co
-
JS实现超简单的仿QQ折叠菜单效果
本文实例讲述了JS实现超简单的仿QQ折叠菜单效果.分享给大家供大家参考.具体如下: 这是一款经过精简后的仿QQ折叠菜单代码,以前发过的,不过这个是经过几轮代码精简后的一个版本,而且在各浏览器下的表现也很不错,兼容性没出问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-f-qq-zd-style-menu-codes/ 具体代码如下: <!DOCTYPE html> <html xmlns="http:/
-
js实现带缓冲效果的仿QQ面板折叠菜单代码
本文实例讲述了js实现带缓冲效果的仿QQ面板折叠菜单代码.分享给大家供大家参考.具体如下: 带缓冲效果的仿QQ面板折叠菜单代码,使用方法:调用效果: Effect(1,2); 其中1为: 被改变对象的id 其中2为: 控制容器的id 可在使用: this.parentNode.id 取得(父标签的id) 注意给对象ID的时候一定不要重复. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-buffer-style-qq-menu-codes
-
javascript仿qq界面的折叠菜单实现代码
最近一直在研究网页特效,看到qq界面的折叠菜单,于是冒出个想法,自己写一个类似的,上网查了一下,发现已经有不少类似的菜单效果,不管那么多,先写着再说吧. 以下是html结构: <div id="a"><div id="h1">sdfds</div><div id="b1">dsfdsfsdfsd</div><div id="h2">dsf</div&
-
JS实现仿QQ面板的手风琴效果折叠菜单代码
本文实例讲述了JS实现仿QQ面板的手风琴效果折叠菜单代码.分享给大家供大家参考.具体如下: 这是一款简单实用的垂直导航菜单,有人把这种风格称为"手风琴"菜单,类似仿QQ面板的折叠菜单,鼠标放在任意一个菜单上,它会展开所属的二级菜单,很不错的选择,以前就分享过此类菜单,这次经过了代码优化升级,更人性化了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-qq-sfq-style-menu-codes/ 具体代码如下: <!