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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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
解析如何用php screw加密php源代码
2013/06/20 PHP
php+highchats生成动态统计图
2014/05/21 PHP
php实现记事本案例
2020/10/20 PHP
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
python如何制作英文字典
2019/06/25 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
报到证丢失证明
2014/01/11 职场文书
消防标语大全
2014/06/07 职场文书
售房协议书范本2014
2014/10/23 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
音乐之声观后感
2015/06/04 职场文书
庆七一晚会主持词
2015/06/30 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python