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 通用javascript函数库整理
Aug 14 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
JS前端笔试题分析
Dec 19 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
jquery实现吸顶导航效果
Jan 08 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
图象函数中的中文显示
2006/10/09 PHP
杏林同学录(六)
2006/10/09 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
解读! Python在人工智能中的作用
2017/11/14 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
自我鉴定的范文
2013/10/03 职场文书
高一生物教学反思
2014/01/17 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
住宅质量保证书
2014/04/29 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书