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 相关文章推荐
jquery last-child 列表最后一项的样式
Jan 22 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
Vuex实现数据共享的方法
Dec 20 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
js+canvas绘制图形验证码
Sep 21 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
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中的日期及时间
2006/11/23 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
php检测文件编码的方法示例
2014/04/25 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
Python字符串中查找子串小技巧
2015/04/10 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
python编程的核心知识点总结
2021/02/08 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
酒店前台接待岗位职责
2013/12/03 职场文书
党建示范点实施方案
2014/03/12 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
2015年商场工作总结
2015/04/27 职场文书
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers
利用Java连接Hadoop进行编程
2022/06/28 Java/Android