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 相关文章推荐
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
如何测量vue应用运行时的性能
Jun 21 Javascript
JS实现的排列组合算法示例
Jul 16 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
建立动态的WML站点(三)
2006/10/09 PHP
php数据库密码的找回的步骤
2011/01/12 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
php建立Ftp连接的方法
2015/03/07 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
js实现简单的倒计时
2021/01/28 Javascript
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
python实现拼接图片
2020/03/23 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
2014年教师工作总结
2014/11/10 职场文书
技术股东合作协议书
2014/12/02 职场文书
公司经营目标责任书
2015/01/29 职场文书
护士工作心得体会
2016/01/25 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang