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编程语言的编码规范
Oct 21 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
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
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
php统计文章排行示例
2014/03/04 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python操作SQLite简明教程
2014/07/10 Python
Python封装shell命令实例分析
2015/05/05 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python接口自动化测试的实现
2020/08/28 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
应聘文员自荐信范文
2014/03/11 职场文书
2014年接待工作总结
2014/11/26 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
大二学年个人总结
2015/03/03 职场文书
商场营业员岗位职责
2015/04/14 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL