JS实现新浪微博效果带遮罩层的弹出框代码


Posted in Javascript onOctober 12, 2015

本文实例讲述了JS实现新浪微博效果带遮罩层的弹出框代码。分享给大家供大家参考。具体如下:

这是一款新浪微博效果的弹出框,现成的JS代码,兼容IE6+,以及各主流浏览器。新浪微博弹出层并可拖拽,操作轻松舒适,符合用户的浏览习惯,将代码推荐给各位网友。

运行效果截图如下:

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=utf-8" />
<title>弹出层并可拖拽</title>
<style>
body,html{height:2000px;}
body,div,h2{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
center{padding-top:10px;}
button{cursor:pointer;}
#overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;}
*html #overlay{position:absolute;}
#win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}
h2{font-size:12px;height:18px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;}
h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}
</style>
<script>
window.onload = function ()
{
 var shit = !-[1, ];
 var oWin = document.getElementById("win");
 var oLay = document.getElementById("overlay"); 
 var oBtn = document.getElementsByTagName("button")[0];
 var oClose = document.getElementById("close");
 var oH2 = oWin.getElementsByTagName("h2")[0];
 var bDrag = false;
 var disX = disY = 0;
 var iScrollT = document.documentElement.scrollTop || document.body.scrollTop;
 var iScrollL = document.documentElement.scrollLeft || document.body.scrollLeft;
 oBtn.onclick = function ()
 {
  oLay.style.display = "block";
  oWin.style.display = "block";
  shit && (oLay.style.height = document.body.offsetHeight + "px");
 };
 oClose.onclick = function ()
 {
  oLay.style.display = "none";
  oWin.style.display = "none";  
 };
 oClose.onmousedown = function (event)
 {
  (event || window.event).cancelBubble = true;
 };
 oH2.onmousedown = function (event)
 {  
  var event = event || window.event;
  bDrag = true;
  disX = event.clientX - oWin.offsetLeft + iScrollL;
  disY = event.clientY - oWin.offsetTop + iScrollT;  
  this.setCapture && this.setCapture();  
  return false
 };
 document.onmousemove = function (event)
 {
  if (!bDrag) return;
  var event = event || window.event;
  var iL = event.clientX - disX + iScrollL;
  var iT = event.clientY - disY + iScrollT;
  var maxL = document.body.clientWidth - oWin.offsetWidth;
  var maxT = document.body.clientHeight - oWin.offsetHeight;  
  iL = iL < 0 ? 0 : iL;
  iL = iL > maxL ? maxL : iL;   
  iT = iT < 0 ? 0 : iT;
  iT = iT > maxT ? maxT : iT;
  oWin.style.marginTop = oWin.style.marginLeft = 0;
  oWin.style.left = iL + "px";
  oWin.style.top = iT + "px";  
  return false
 };
 document.onmouseup = window.onblur = oH2.onlosecapture = function ()
 {
  bDrag = false;    
  oH2.releaseCapture && oH2.releaseCapture();
 };
};
</script>
</head>
<body>
<div id="overlay"></div>
<div id="win"><h2><span id="close">×</span></h2></div>
<center><button>弹出层</button></center>
</body>
</html>

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

Javascript 相关文章推荐
EXT中xtype的含义分析
Jan 07 Javascript
js的逻辑运算符 ||
May 31 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 #Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 #Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 #Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 #Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 #Javascript
javascript函数式编程程序员的工具集
Oct 11 #Javascript
深入探讨javascript函数式编程
Oct 11 #Javascript
You might like
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
JS input 数字验证代码
2009/07/30 Javascript
javascript demo 基本技巧
2009/12/18 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
公司门卫岗位职责
2014/03/15 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
厉行节约工作总结
2015/08/12 职场文书
中学教师教学工作总结
2015/08/13 职场文书
小学副班长竞选稿
2015/11/21 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL