JS实现仿微博可关闭弹出层效果


Posted in Javascript onSeptember 21, 2015

本文实例讲述了JS实现仿微博可关闭弹出层效果。分享给大家供大家参考。具体如下:

这里推荐给大家一款真心不错的JavaScript网页弹出层,仿微博JS弹出层可关闭,点击按钮才弹出来,可制作成网页客服之类的,比如在网页的右侧显示这么一个按钮,当点击的时候,展开层,显示客服QQ,效果还是很不错的!

运行效果截图如下:

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="Content-Type" content="text/html; charset=gb2312" />
<title>圆角弹出层DIV CSS</title>
<style>
body{ font-size:12px;}
.tit{ font-size:14px; padding:0; margin:0; height:31px; line-height:31px; background: url(images/titbg.gif) center top repeat-x #CBE4EF;}
.tit b{ float:left; margin-left:15px;}
.tit a{ float:right; margin-right:5px; margin-top:6px; display:inline;}
a.cls{height:18px; width:18px;display:block; overflow:hidden; line-height:200px;}
.nr{padding:10px; text-align:left;}
a.cls,a.cls:link,a.cls:visited{background:url(images/cls.gif) center 0 no-repeat;}
a.cls:hover{background:url(images/cls.gif) center -20px no-repeat;}
.box{ border:1px #999999 solid; background:#FFF;}
/*圆角边框*/
.lt,.rt,.lb,.rb{ background-image:url(images/abg.png);filter:alpha(opacity=10);-moz-opacity:.1;opacity:.1;line-height:0;}
.lt,.rt,.lb,.rb{ height:6px;width:6px;}.t,.b,.l,.r{ background:#000000;filter:alpha(opacity=10);-moz-opacity:.1;opacity:.1;line-height:0;}
.l,.r{width:6px;}.t,.b{height:6px;}.lt{ background-position:0 0;}.rt{ background-position:right 0;}.lb{ background-position:0 bottom;}.rb{ background-position:right bottom;}
/*小三角*/
s{position:absolute;top:-13px;*top:-13px;left:50px;display:block;height:0;width:0;font-size:0; line-height: 0;border-color:transparent transparent #666 transparent;border-style:dashed dashed solid dashed;border-width:10px;}
i{position:absolute;top:-9px;*top:-9px;left:-10px;display:block;height:0;width:0;font-size: 0;border-width:10px;
line-height: 0;border-color:transparent transparent #FFF transparent;border-style:dashed dashed solid dashed;}
.open{ position:relative; width:150px; height:25px;line-height:180%; border:1px solid #FF9900; background:#FFCC00;margin:12% auto 0 400px; text-align:center;}
.open span{cursor:pointer; display:block; width:100%;}
.odiv{ position:absolute; top:29px; left:-1px; width:300px;}
</style>
<script type="text/javascript">
function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
var openTip = oOpenTip || "";
var shutTip = oShutTip || "";
if(targetObj.style.display!="none"){
 if(shutAble) return;
 targetObj.style.display="none";
 if(openTip && shutTip){
 sourceObj.innerHTML = shutTip; 
 }
} else {
 targetObj.style.display="block";
 if(openTip && shutTip){
 sourceObj.innerHTML = openTip; 
 }
}
}
</script>
</head>
<body>
<div class="open"><span onclick="openShutManager(this,'box',false,'点击这里,关闭层','点击这里,弹出层')">点击这里,弹出层</span>
<div class="odiv" id="box" style="display:none"><table border="0" cellpadding="0" cellspacing="0">
 <tr><td class="lt"></td><td class="t"></td><td class="rt"></td></tr><tr><td class="l"></td><td class="box">
  <h3 class="tit"><b>这里是标题</b><a class="cls" href="javascript:;" onclick="openShutManager(this,'box',false)" title="关闭">关闭</a></h3>
  <div class="nr"> 提示:<br />
   1、在代码状态下使用[html][/html]可以贴“代码运行”的代码。并禁用发帖左侧的 URL 识别和标签解析<br />
   2、技术版面请勿灌水。特别受欢迎的主题可以顶一顶,但是请接受版主的定期“擦水”,这是为了减少技术讨论区出现的无效信息。<br />
   3、如需要收藏主题,请使用主题右上角的链接,还可以推荐给论坛里的朋友。<br />
   <b>此方法简单,自适应内容高宽,易方便改风格。</b>
   </div>
   </td><td class="r"></td></tr><tr><td class="lb"></td><td class="b"></td><td class="rb"></td></tr></table><s><i></i></s>
   </div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js树形控件脚本代码
Jul 24 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 #Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 #Javascript
Javascript验证方法大全
Sep 21 #Javascript
JavaScript验证Email(3种方法)
Sep 21 #Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 #Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 #Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 #Javascript
You might like
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
学习ExtJS table布局
2009/10/08 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
js实现分割上传大文件
2016/03/09 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
python flask 多对多表查询功能
2017/06/25 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
银行实习的自我鉴定
2013/12/10 职场文书
自我评价个人范文
2013/12/16 职场文书
教师聘用意向书
2015/05/11 职场文书
小学校本教研总结
2015/08/13 职场文书
Redis批量生成数据的实现
2022/06/05 Redis