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 相关文章推荐
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
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
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
使用URL传输SESSION信息
2015/07/14 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
php常用图片处理类
2016/03/16 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
scrapy爬虫完整实例
2018/01/25 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
银行会计职员个人的自我评价
2013/09/29 职场文书
学习交流会主持词
2014/04/01 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
心理学专业求职信
2014/06/16 职场文书
护士找工作求职信
2014/07/02 职场文书
部门2014年度工作总结
2014/11/12 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers